From 97b0ef233b489e0053589d4d02422208d456cf19 Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Wed, 20 May 2026 20:27:39 +0200
Subject: [PATCH 1/4] Implement collapsible nested navigation in docs sidebar
 and mobile menu

---
 src/components/docs-sidebar.tsx | 104 +++++++++++++++++++------
 src/components/mobile-nav.tsx   | 132 +++++++++++++++++++++++++++-----
 src/config/docs.ts              |  13 +++-
 3 files changed, 206 insertions(+), 43 deletions(-)

diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx
index 1e1458d..195ed14 100644
--- a/src/components/docs-sidebar.tsx
+++ b/src/components/docs-sidebar.tsx
@@ -1,7 +1,9 @@
 'use client'
 
+import * as React from 'react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import { ChevronRight } from 'lucide-react'
 import { docsConfig, type NavItemWithChildren } from '@/config/docs'
 import { cn } from '@/lib/utils'
 
@@ -35,46 +37,102 @@ interface DocsSidebarNavItemsProps {
 
 function DocsSidebarNavItems({ items, pathname }: DocsSidebarNavItemsProps) {
   return items.length ? (
-    <div className='flex flex-col space-y-1 border-l border-zinc-200 ml-3 pl-2 text-sm dark:border-zinc-800'>
-      {items.map((item, index) =>
-        item.href ? (
+    <div className='flex flex-col space-y-1 text-sm'>
+      {items.map((item, index) => (
+        <SidebarNavItem key={index} item={item} pathname={pathname} />
+      ))}
+    </div>
+  ) : null
+}
+
+function SidebarNavItem({ item, pathname }: { item: NavItemWithChildren; pathname: string | null }) {
+  const hasChildren = item.items && item.items.length > 0
+  
+  // Recursively check if a child is active
+  const isChildActive = React.useMemo(() => {
+    const checkActive = (navItem: NavItemWithChildren): boolean => {
+      if (navItem.href && pathname?.startsWith(navItem.href) && navItem.href !== '/') return true
+      if (navItem.items && navItem.items.length > 0) {
+        return navItem.items.some(checkActive)
+      }
+      return false
+    }
+    return checkActive(item)
+  }, [item, pathname])
+
+  const [isOpen, setIsOpen] = React.useState(isChildActive)
+  const isActive = pathname === item.href
+
+  return (
+    <div className="flex flex-col space-y-1 relative">
+      <div className="group relative flex w-full items-center">
+        {item.href ? (
           <Link
-            key={index}
             href={item.href}
             className={cn(
-              'group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 transition-colors',
+              'flex w-full items-center rounded-md border border-transparent px-2 py-1.5 pr-8 transition-colors',
               item.disabled && 'cursor-not-allowed opacity-60',
-              pathname === item.href
+              isActive
                 ? 'bg-zinc-100 font-medium text-zinc-900 dark:bg-zinc-800/50 dark:text-zinc-50'
                 : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-50',
             )}
             target={item.external ? '_blank' : ''}
             rel={item.external ? 'noreferrer' : ''}
           >
-            {item.title}
-            {item.label ? (
-              <span className='ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline'>
-                {item.label}
-              </span>
-            ) : null}
+            <span className="flex items-center">
+              {item.title}
+              {item.label ? (
+                <span className='ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline'>
+                  {item.label}
+                </span>
+              ) : null}
+            </span>
           </Link>
         ) : (
           <span
-            key={index}
             className={cn(
-              'flex w-full cursor-not-allowed items-center rounded-md px-2 py-1.5 text-zinc-600 hover:underline dark:text-zinc-400',
-              item.disabled && 'cursor-not-allowed opacity-60',
+              'flex w-full items-center rounded-md px-2 py-1.5 pr-8 text-zinc-600 transition-colors dark:text-zinc-400',
+              item.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-50',
             )}
+            onClick={!item.disabled && hasChildren ? () => setIsOpen(!isOpen) : undefined}
           >
-            {item.title}
-            {item.label ? (
-              <span className='ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline'>
-                {item.label}
-              </span>
-            ) : null}
+            <span className="flex items-center">
+              {item.title}
+              {item.label ? (
+                <span className='ml-2 rounded-md bg-muted px-1.5 py-0.5 text-xs leading-none text-muted-foreground no-underline group-hover:no-underline'>
+                  {item.label}
+                </span>
+              ) : null}
+            </span>
           </span>
-        ),
+        )}
+        
+        {hasChildren && (
+          <button
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsOpen(!isOpen)
+            }}
+            className="absolute right-1 top-1 p-1 rounded-sm text-zinc-400 hover:bg-zinc-200 hover:text-zinc-900 dark:text-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+          >
+            <ChevronRight
+              className={cn(
+                "h-4 w-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-90"
+              )}
+            />
+          </button>
+        )}
+      </div>
+      
+      {hasChildren && isOpen && (
+        <div className="ml-3 border-l border-zinc-200 pl-2 dark:border-zinc-800 mt-1 flex flex-col space-y-1">
+          {item.items.map((child, index) => (
+            <SidebarNavItem key={index} item={child} pathname={pathname} />
+          ))}
+        </div>
       )}
     </div>
-  ) : null
+  )
 }
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index d4b0ec2..e0ca34d 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -3,8 +3,8 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { Github, Menu } from "lucide-react"
-import { docsConfig } from "@/config/docs"
+import { Github, Menu, ChevronRight } from "lucide-react"
+import { docsConfig, type NavItemWithChildren } from "@/config/docs"
 import { Button } from "@/components/ui/button"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import { cn } from "@/lib/utils"
@@ -82,19 +82,14 @@ export function MobileNav() {
                     {section.title}
                   </div>
                   <div className="flex flex-col space-y-1 border-l border-zinc-200 ml-3 pl-2 dark:border-zinc-800">
-                    {section.items.map((item) =>
-                      item.href ? (
-                        <MobileLink
-                          key={item.href}
-                          href={item.href}
-                          pathname={pathname}
-                          onOpenChange={setOpen}
-                          className="px-2 py-1.5 text-zinc-600 dark:text-zinc-400"
-                        >
-                          {item.title}
-                        </MobileLink>
-                      ) : null
-                    )}
+                    {section.items.map((item, index) => (
+                      <MobileSidebarNavItem
+                        key={index}
+                        item={item}
+                        pathname={pathname}
+                        onOpenChange={setOpen}
+                      />
+                    ))}
                   </div>
                 </div>
               ))}
@@ -121,10 +116,20 @@ function MobileLink({
   children,
   className,
 }: MobileLinkProps) {
-  const allHrefs = [
-    ...docsConfig.mainNav.map((n) => n.href),
-    ...docsConfig.sidebarNav.flatMap((s) => s.items.map((i) => i.href)),
-  ].filter(Boolean) as string[]
+  const allHrefs = React.useMemo(() => {
+    const hrefs: string[] = []
+    const extractHrefs = (items: NavItemWithChildren[]) => {
+      items.forEach((item) => {
+        if (item.href) hrefs.push(item.href)
+        if (item.items) extractHrefs(item.items)
+      })
+    }
+    docsConfig.mainNav.forEach((item) => {
+      if (item.href) hrefs.push(item.href)
+    })
+    extractHrefs(docsConfig.sidebarNav as NavItemWithChildren[])
+    return hrefs
+  }, [])
 
   const active =
     pathname === href ||
@@ -151,3 +156,92 @@ function MobileLink({
     </Link>
   )
 }
+
+function MobileSidebarNavItem({
+  item,
+  pathname,
+  onOpenChange,
+}: {
+  item: NavItemWithChildren
+  pathname: string
+  onOpenChange?: (open: boolean) => void
+}) {
+  const hasChildren = item.items && item.items.length > 0
+  
+  const isChildActive = React.useMemo(() => {
+    const checkActive = (navItem: NavItemWithChildren): boolean => {
+      if (navItem.href && pathname?.startsWith(navItem.href) && navItem.href !== '/') return true
+      if (navItem.items && navItem.items.length > 0) {
+        return navItem.items.some(checkActive)
+      }
+      return false
+    }
+    return checkActive(item)
+  }, [item, pathname])
+
+  const [isOpen, setIsOpen] = React.useState(isChildActive)
+  const isActive = pathname === item.href
+
+  return (
+    <div className="flex flex-col space-y-1 relative">
+      <div className="group relative flex w-full items-center">
+        {item.href ? (
+          <Link
+            href={item.href}
+            onClick={() => onOpenChange?.(false)}
+            className={cn(
+              "flex w-full items-center rounded-lg px-2 py-1.5 pr-8 transition-colors",
+              item.disabled && "cursor-not-allowed opacity-60",
+              isActive
+                ? "bg-zinc-100 font-medium text-zinc-950 dark:bg-zinc-900 dark:text-zinc-50"
+                : "text-zinc-600 hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-400 dark:hover:bg-zinc-900 dark:hover:text-zinc-50"
+            )}
+          >
+            {item.title}
+          </Link>
+        ) : (
+          <span
+            className={cn(
+              "flex w-full items-center rounded-lg px-2 py-1.5 pr-8 text-zinc-600 transition-colors dark:text-zinc-400",
+              item.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-zinc-100 hover:text-zinc-950 dark:hover:bg-zinc-900 dark:hover:text-zinc-50"
+            )}
+            onClick={!item.disabled && hasChildren ? () => setIsOpen(!isOpen) : undefined}
+          >
+            {item.title}
+          </span>
+        )}
+        
+        {hasChildren && (
+          <button
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              setIsOpen(!isOpen)
+            }}
+            className="absolute right-1 top-1 p-1 rounded-sm text-zinc-400 hover:bg-zinc-200 hover:text-zinc-950 dark:text-zinc-500 dark:hover:bg-zinc-700 dark:hover:text-zinc-100"
+          >
+            <ChevronRight
+              className={cn(
+                "h-4 w-4 shrink-0 transition-transform duration-200",
+                isOpen && "rotate-90"
+              )}
+            />
+          </button>
+        )}
+      </div>
+      
+      {hasChildren && isOpen && (
+        <div className="ml-3 border-l border-zinc-200 pl-2 dark:border-zinc-800 mt-1 flex flex-col space-y-1">
+          {item.items.map((child, index) => (
+            <MobileSidebarNavItem
+              key={index}
+              item={child}
+              pathname={pathname}
+              onOpenChange={onOpenChange}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/src/config/docs.ts b/src/config/docs.ts
index 8fdc93f..4a7147c 100644
--- a/src/config/docs.ts
+++ b/src/config/docs.ts
@@ -103,7 +103,18 @@ export const docsConfig: DocsConfig = {
         {
           title: 'AI Service API',
           href: '/docs/api/ai-service',
-          items: [],
+          items: [
+            {
+              title: 'Authentication',
+              href: '/docs/api/ai-service/authentication',
+              items: [],
+            },
+            {
+              title: 'Endpoints',
+              href: '/docs/api/ai-service/endpoints',
+              items: [],
+            },
+          ],
         },
         {
           title: 'Backend API',

From c6223a673cf063efed6e4f28a821cb9944b92f8d Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Wed, 20 May 2026 20:46:05 +0200
Subject: [PATCH 2/4] Add defaultOpen support to sidebar navigation and update
 documentation structure with hidden scrollbars

---
 src/components/docs-sidebar.tsx |   4 +-
 src/components/mobile-nav.tsx   |   2 +-
 src/config/docs.ts              | 142 +++++++++++++++++++++++++++-----
 3 files changed, 124 insertions(+), 24 deletions(-)

diff --git a/src/components/docs-sidebar.tsx b/src/components/docs-sidebar.tsx
index 195ed14..cae2d95 100644
--- a/src/components/docs-sidebar.tsx
+++ b/src/components/docs-sidebar.tsx
@@ -11,7 +11,7 @@ export function DocsSidebar() {
   const pathname = usePathname()
 
   return (
-    <aside className='border-border/40 fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block'>
+    <aside className='border-border/40 fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r md:sticky md:block [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'>
       <div className='py-6 pr-6 lg:py-8'>
         <div className='w-full'>
           {docsConfig.sidebarNav.map((section, index) => (
@@ -60,7 +60,7 @@ function SidebarNavItem({ item, pathname }: { item: NavItemWithChildren; pathnam
     return checkActive(item)
   }, [item, pathname])
 
-  const [isOpen, setIsOpen] = React.useState(isChildActive)
+  const [isOpen, setIsOpen] = React.useState(isChildActive || item.defaultOpen)
   const isActive = pathname === item.href
 
   return (
diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
index e0ca34d..e8d3603 100644
--- a/src/components/mobile-nav.tsx
+++ b/src/components/mobile-nav.tsx
@@ -179,7 +179,7 @@ function MobileSidebarNavItem({
     return checkActive(item)
   }, [item, pathname])
 
-  const [isOpen, setIsOpen] = React.useState(isChildActive)
+  const [isOpen, setIsOpen] = React.useState(isChildActive || item.defaultOpen)
   const isActive = pathname === item.href
 
   return (
diff --git a/src/config/docs.ts b/src/config/docs.ts
index 4a7147c..0325e8e 100644
--- a/src/config/docs.ts
+++ b/src/config/docs.ts
@@ -5,6 +5,7 @@ export interface NavItem {
   external?: boolean
   icon?: string
   label?: string
+  defaultOpen?: boolean
 }
 
 export interface NavItemWithChildren extends NavItem {
@@ -47,8 +48,34 @@ export const docsConfig: DocsConfig = {
         },
         {
           title: 'Architecture',
-          href: '/docs/architecture',
-          items: [],
+          defaultOpen: true,
+          items: [
+            {
+              title: 'Overall',
+              href: '/docs/architecture',
+              items: [],
+            },
+            {
+              title: 'Data Prep',
+              href: '/docs/architecture/data-prep',
+              items: [],
+            },
+            {
+              title: 'Preprocessor',
+              href: '/docs/architecture/preprocessor',
+              items: [],
+            },
+            {
+              title: 'Training System',
+              href: '/docs/architecture/training-system',
+              items: [],
+            },
+            {
+              title: 'Model Registry',
+              href: '/docs/architecture/model-registry',
+              items: [],
+            },
+          ],
         },
         {
           title: 'Prerequisites',
@@ -63,7 +90,34 @@ export const docsConfig: DocsConfig = {
         {
           title: 'AI Service',
           href: '/docs/installation/ai-service',
-          items: [],
+          defaultOpen: true,
+          items: [
+            {
+              title: 'Inference Backend',
+              href: '/docs/installation/ai-service/inference-backend',
+              items: [],
+            },
+            {
+              title: 'Data Prep',
+              href: '/docs/installation/ai-service/data-prep',
+              items: [],
+            },
+            {
+              title: 'Preprocessor',
+              href: '/docs/installation/ai-service/preprocessor',
+              items: [],
+            },
+            {
+              title: 'Training System',
+              href: '/docs/installation/ai-service/training-system',
+              items: [],
+            },
+            {
+              title: 'Model Registry',
+              href: '/docs/installation/ai-service/model-registry',
+              items: [],
+            },
+          ],
         },
         {
           title: 'Backend API',
@@ -82,21 +136,6 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
-    {
-      title: 'Core Concepts',
-      items: [
-        {
-          title: 'Mental States',
-          href: '/docs/concepts/mental-states',
-          items: [],
-        },
-        {
-          title: 'EEG Processing',
-          href: '/docs/concepts/eeg-processing',
-          items: [],
-        },
-      ],
-    },
     {
       title: 'API Reference',
       items: [
@@ -110,8 +149,38 @@ export const docsConfig: DocsConfig = {
               items: [],
             },
             {
-              title: 'Endpoints',
-              href: '/docs/api/ai-service/endpoints',
+              title: 'Models',
+              href: '/docs/api/ai-service/models',
+              items: [],
+            },
+            {
+              title: 'RAG Ingestion',
+              href: '/docs/api/ai-service/rag',
+              items: [],
+            },
+            {
+              title: 'Speech & Audio',
+              href: '/docs/api/ai-service/speech',
+              items: [],
+            },
+            {
+              title: 'Content Moderation',
+              href: '/docs/api/ai-service/moderation',
+              items: [],
+            },
+            {
+              title: 'Streaming Chat',
+              href: '/docs/api/ai-service/chat',
+              items: [],
+            },
+            {
+              title: 'Error Handling',
+              href: '/docs/api/ai-service/errors',
+              items: [],
+            },
+            {
+              title: 'Rate Limits',
+              href: '/docs/api/ai-service/rate-limits',
               items: [],
             },
           ],
@@ -119,7 +188,38 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Backend API',
           href: '/docs/api/backend',
-          items: [],
+          items: [
+            {
+              title: 'Authentication',
+              href: '/docs/api/backend/authentication',
+              items: [],
+            },
+            {
+              title: 'Users & Roles',
+              href: '/docs/api/backend/users',
+              items: [],
+            },
+            {
+              title: 'Organizations',
+              href: '/docs/api/backend/organizations',
+              items: [],
+            },
+            {
+              title: 'Billing & Subscriptions',
+              href: '/docs/api/backend/billing',
+              items: [],
+            },
+            {
+              title: 'Webhooks',
+              href: '/docs/api/backend/webhooks',
+              items: [],
+            },
+            {
+              title: 'Status Codes',
+              href: '/docs/api/backend/status-codes',
+              items: [],
+            },
+          ],
         },
       ],
     },

From d1206797b421a07d6979607aed6058c5ee03c19e Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Wed, 20 May 2026 21:31:40 +0200
Subject: [PATCH 3/4] Implement table of contents component with rehype-slug
 integration and update documentation structure

---
 next.config.ts                 |  4 +++
 package-lock.json              | 50 ++++++++++++++++++++++++++++++++++
 package.json                   |  1 +
 src/components/docs-layout.tsx |  6 +++-
 4 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/next.config.ts b/next.config.ts
index 9ccea5c..3b1c083 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,5 +1,6 @@
 import type { NextConfig } from 'next'
 import createMDX from '@next/mdx'
+import rehypeSlug from 'rehype-slug'
 
 const nextConfig: NextConfig = {
   /* config options here */
@@ -8,6 +9,9 @@ const nextConfig: NextConfig = {
 
 const withMDX = createMDX({
   extension : /\.mdx?$/,
+  options: {
+    rehypePlugins: [rehypeSlug],
+  },
 })
 
 export default withMDX(nextConfig)
diff --git a/package-lock.json b/package-lock.json
index 354c513..e886aae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "radix-ui": "^1.4.3",
         "react": "19.2.3",
         "react-dom": "19.2.3",
+        "rehype-slug": "^6.0.0",
         "tailwind-merge": "^3.5.0"
       },
       "devDependencies": {
@@ -7546,6 +7547,12 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-slugger": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
+      "license": "ISC"
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -7716,6 +7723,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-estree": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
@@ -7771,6 +7791,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-string": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -11535,6 +11568,23 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-mdx": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.1.tgz",
diff --git a/package.json b/package.json
index e48ee95..53d4e3f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "radix-ui": "^1.4.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
+    "rehype-slug": "^6.0.0",
     "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
diff --git a/src/components/docs-layout.tsx b/src/components/docs-layout.tsx
index 75bf461..0b9324e 100644
--- a/src/components/docs-layout.tsx
+++ b/src/components/docs-layout.tsx
@@ -2,6 +2,7 @@
 
 import { DocsSidebar } from '@/components/docs-sidebar'
 import { SiteHeader } from '@/components/site-header'
+import { TableOfContents } from '@/components/toc'
 
 interface DocsLayoutProps {
   children: React.ReactNode
@@ -12,11 +13,14 @@ export function DocsLayout({ children }: DocsLayoutProps) {
     <div className='flex min-h-screen flex-col'>
       <SiteHeader />
       <div className='container-wrapper flex-1'>
-        <div className='container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-10 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-12'>
+        <div className='container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10 xl:grid-cols-[240px_minmax(0,1fr)_200px]'>
           <DocsSidebar />
           <main className='relative py-8 lg:py-12'>
             <div className='mx-auto w-full max-w-4xl min-w-0'>{children}</div>
           </main>
+          <aside className='hidden text-sm xl:block sticky top-14 h-[calc(100vh-3.5rem)] overflow-y-auto pt-12 pb-8 pl-4 pr-6 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'>
+            <TableOfContents />
+          </aside>
         </div>
       </div>
     </div>

From cbdcc11dac8cdd6582ee6208521231d92bf3cbb9 Mon Sep 17 00:00:00 2001
From: Polo <nelsonprox92@gmail.com>
Date: Wed, 20 May 2026 21:31:47 +0200
Subject: [PATCH 4/4] Implement TableOfContents component and update
 documentation configuration structure

---
 src/components/toc.tsx | 89 ++++++++++++++++++++++++++++++++++++++++++
 src/config/docs.ts     | 42 ++++++++++++++++++--
 2 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 src/components/toc.tsx

diff --git a/src/components/toc.tsx b/src/components/toc.tsx
new file mode 100644
index 0000000..2ddefa3
--- /dev/null
+++ b/src/components/toc.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import * as React from 'react'
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+
+interface TocItem {
+  id: string
+  title: string
+  level: number
+}
+
+export function TableOfContents() {
+  const [items, setItems] = useState<TocItem[]>([])
+  const [activeId, setActiveId] = useState<string>('')
+
+  useEffect(() => {
+    // Timeout ensures we capture DOM elements after MDX renders and hydrates
+    const timer = setTimeout(() => {
+      const elements = Array.from(document.querySelectorAll('main h2, main h3'))
+      
+      const tocItems: TocItem[] = elements.map((el) => ({
+        id: el.id,
+        title: el.textContent || '',
+        level: Number(el.tagName.charAt(1)),
+      })).filter(item => item.id)
+
+      setItems(tocItems)
+      
+      // Initialize active ID to the first item if none is set and we have items
+      if (tocItems.length > 0 && !activeId) {
+        // Find which item is currently near top of viewport, or just default to first
+        setActiveId(tocItems[0].id)
+      }
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: '-100px 0px -66% 0px' }
+    )
+
+    const elements = document.querySelectorAll('main h2, main h3')
+    elements.forEach((el) => observer.observe(el))
+
+    return () => {
+      elements.forEach((el) => observer.unobserve(el))
+    }
+  }, [items])
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="font-semibold text-sm text-zinc-900 dark:text-zinc-100">On This Page</p>
+      <ul className="m-0 list-none flex flex-col space-y-2.5 text-sm">
+        {items.map((item) => (
+          <li
+            key={item.id}
+            style={{ paddingLeft: `${(item.level - 2) * 1}rem` }}
+          >
+            <a
+              href={`#${item.id}`}
+              className={cn(
+                "block transition-colors hover:text-zinc-900 dark:hover:text-zinc-50",
+                activeId === item.id
+                  ? "font-medium text-sky-600 dark:text-sky-400"
+                  : "text-zinc-500 dark:text-zinc-400"
+              )}
+            >
+              {item.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/config/docs.ts b/src/config/docs.ts
index 0325e8e..b336a74 100644
--- a/src/config/docs.ts
+++ b/src/config/docs.ts
@@ -51,7 +51,7 @@ export const docsConfig: DocsConfig = {
           defaultOpen: true,
           items: [
             {
-              title: 'Overall',
+              title: 'Introduction',
               href: '/docs/architecture',
               items: [],
             },
@@ -75,6 +75,26 @@ export const docsConfig: DocsConfig = {
               href: '/docs/architecture/model-registry',
               items: [],
             },
+            {
+              title: 'Data Storage',
+              href: '/docs/architecture/data-storage',
+              items: []
+            },
+            {
+              title: 'Inference Backend',
+              href: '/docs/architecture/inference-backend',
+              items: []
+            },
+            {
+              title : 'Orchestration Backend',
+              href : '/docs/architecture/orchestration-backend',
+              items : []
+            },
+            {
+              title: 'Web UI',
+              href: '/docs/architecture/web-ui',
+              items: []
+            }
           ],
         },
         {
@@ -89,9 +109,13 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'AI Service',
-          href: '/docs/installation/ai-service',
           defaultOpen: true,
           items: [
+            {
+              title: 'Introduction',
+              href: '/docs/installation/ai-service',
+              items: [],
+            },
             {
               title: 'Inference Backend',
               href: '/docs/installation/ai-service/inference-backend',
@@ -141,8 +165,13 @@ export const docsConfig: DocsConfig = {
       items: [
         {
           title: 'AI Service API',
-          href: '/docs/api/ai-service',
+          defaultOpen: true,
           items: [
+            {
+              title: 'All',
+              href: '/docs/api/ai-service',
+              items: [],
+            },
             {
               title: 'Authentication',
               href: '/docs/api/ai-service/authentication',
@@ -187,8 +216,13 @@ export const docsConfig: DocsConfig = {
         },
         {
           title: 'Backend API',
-          href: '/docs/api/backend',
+          defaultOpen: true,
           items: [
+            {
+              title: 'All',
+              href: '/docs/api/backend',
+              items: [],
+            },
             {
               title: 'Authentication',
               href: '/docs/api/backend/authentication',