Add menu item icons

Author: bcbogdan

docs/references/cdi/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "CDI Reference",
+  "label": "Core Driver Interface",
   "customProps": { "isMainCategory": true },
   "position": 5
 }

docs/references/fdi/_category_.json

@@ -1,5 +1,5 @@
 {
-  "label": "FDI Reference",
+  "label": "Frontend Driver Interface",
   "customProps": { "isMainCategory": true },
   "position": 4
 }

src/components/MenuItemIcon.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import {
+  Book,
+  Zap,
+  Key,
+  Shield,
+  GitPullRequest,
+  CircleUserRound,
+  FileTerminal,
+  FileCode,
+  HardDrive,
+  NotebookTabs,
+  Users,
+  ArrowRight,
+  Settings,
+  Server,
+  Mail,
+  Smartphone,
+  Share2,
+  Building,
+  RectangleEllipsis,
+  Bot,
+  Layers,
+  Fingerprint,
+  MailCheck,
+  ShieldCheck,
+  Clock,
+  UserCheck,
+  ShieldAlert,
+  Timer,
+  UserCog,
+  Link,
+  BarChart3,
+  Puzzle,
+  Cloud,
+  Triangle,
+  Database,
+  Workflow,
+  Globe,
+  Folder,
+  FileText,
+  Monitor,
+  Code,
+  Bug,
+  Wrench,
+  Palette,
+  FlaskConical,
+  BookOpenCheck,
+  Cpu,
+  Hash,
+  History,
+  Construction,
+  Play,
+  ChevronRight,
+  Lightbulb,
+} from "lucide-react";
+
+import VercelLogo from "/img/logos/vercel.svg";
+import SupabaseLogo from "/img/logos/supabase.svg";
+import HasuraLogo from "/img/logos/hasura.svg";
+import NextjsLogo from "/img/logos/nextjs.svg";
+import NestjsLogo from "/img/logos/nestjs.svg";
+import NetlifyLogo from "/img/logos/netlify.svg";
+import AwsLambdaLogo from "/img/logos/aws-lambda.svg";
+import GraphqlLogo from "/img/logos/graphql.svg";
+import CdiLogo from "/img/logos/cdi.svg";
+import FdiLogo from "/img/logos/fdi.svg";
+
+const categoryIcons = {
+  // Main categories
+  References: Book,
+  Quickstart: Zap,
+  Authentication: Key,
+  "Additional Verification": Shield,
+  "Post Authentication": Users,
+  Migration: ArrowRight,
+  "Platform Configuration": Settings,
+  Deployment: Server,
+
+  // Authentication methods
+  "Email Password": RectangleEllipsis,
+  Passwordless: Smartphone,
+  "Social Login": CircleUserRound,
+  "Enterprise Login": Building,
+  "Unified Login": Share2,
+  "Machine to Machine": Bot,
+  Passkeys: Fingerprint,
+
+  // Quickstart integrations
+  Integrations: Puzzle,
+  // "AWS Lambda": AwsLambdaLogo,
+  // NextJS: NextjsLogo,
+  // GraphQL: GraphqlLogo,
+  // Hasura: HasuraLogo,
+  // NestJS: NestjsLogo,
+  // Netlify: NetlifyLogo,
+  // Supabase: SupabaseLogo,
+  // Vercel: VercelLogo,
+
+  // References and SDK sections
+  "Frontend SDKs": Monitor,
+  "Backend SDKs": Server,
+  "User Interface": Palette,
+  "Frontend Driver Interface": FileCode,
+  "Core Driver Interface": FileTerminal,
+  "Testing and Debugging": Bug,
+  "SuperTokens Core": Cpu,
+
+  // Authentication reference subcategories
+  "Email/Password": Mail,
+  ThirdParty: Share2,
+  WebAuthn: Fingerprint,
+  OAuth: Key,
+  MFA: ShieldCheck,
+  Session: Clock,
+  TOTP: Hash,
+  OTP: Smartphone,
+  SAML: Building,
+
+  // Quickstart guides and workflows
+  "Quickstart Guides": Zap,
+  "Advanced Workflows": Workflow,
+  "Legacy Method": History,
+  "Legacy method": History,
+  "Using prebuilt UI": Palette,
+  "Step 1: Account Creation": UserCheck,
+  "5. Checking Sessions in API Routes": Shield,
+  "Checking Sessions in API Routes": Shield,
+
+  // Main quickstart menu items
+  "/docs/quickstart/backend-setup": HardDrive,
+  "/docs/quickstart/frontend-setup": Monitor,
+  "/docs/quickstart/introduction": Book,
+  "/docs/quickstart/next-steps": NotebookTabs,
+  "/docs/quickstart/example-applications": Play,
+};
+
+// Brand logo mappings for integration platforms
+const brandLogos: { [key: string]: string } = {};
+
+type MenuItemIconProps =
+  | {
+      label: string;
+      className?: string;
+    }
+  | {
+      href: string;
+      className?: string;
+    };
+
+export function MenuItemIcon(props: MenuItemIconProps) {
+  const IconComponent = "label" in props ? categoryIcons[props.label] : categoryIcons[props.href];
+
+  if (!IconComponent) {
+    return null;
+  }
+
+  return <IconComponent className={props.className} size={16} />;
+}
+
+export default MenuItemIcon;

src/css/custom.scss

@@ -62,11 +62,11 @@
 
 // Dark mode colors
 [data-theme="dark"] {
-  --ifm-background-color: #1a1a1a;
+  --ifm-background-color: #0a0a0a;
   --ifm-font-color-base: #fff;
   --ifm-heading-color: #ddd;
   --ifm-toc-border-color: #ffffff1a;
-  --ifm-navbar-background-color: #191a1c;
+  --ifm-navbar-background-color: #0a0a0a;
   --ifm-toc-border-color: #484848;
   --ifm-menu-color-active: #5f616b;
   --ifm-menu-color-background-active: #202123;