update

web/components/DocSidebar.tsx

@@ -3,47 +3,99 @@
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { useState } from "react"
-import { Menu } from "lucide-react"
+import { ChevronDown, ChevronRight } from "lucide-react"
 
-const sidebarItems = [
+interface SubMenuItem {
+  title: string
+  href: string
+}
+
+interface MenuItem {
+  title: string
+  href?: string
+  submenu?: SubMenuItem[]
+}
+
+const sidebarItems: MenuItem[] = [
   { title: "Introduction", href: "/docs/introduction" },
   { title: "Installation", href: "/docs/installation" },
-  { title: "Getting Started", href: "/docs/getting-started" },
-  { title: "Features", href: "/docs/features" },
-  { title: "API", href: "/docs/api" },
-  { title: "Guides", href: "/guides" },
-  { title: "FAQ", href: "/docs/faq" },
+  {
+    title: "Hardware: GPUs and Coral",
+    submenu: [
+      { title: "HW iGPU acceleration to an LXC", href: "/docs/hardware/igpu-acceleration-lxc" },
+      { title: "Coral TPU to an LXC", href: "/docs/hardware/coral-tpu-lxc" },
+      { title: "Install Coral TPU on the Host", href: "/docs/hardware/install-coral-tpu-host" },
+    ],
+  },
+  {
+    title: "Hard Drives, Disk Images, and Storage",
+    submenu: [
+      { title: "Disk Passthrough to a VM", href: "/docs/storage/disk-passthrough-vm" },
+      { title: "Import Disk Image to a VM", href: "/docs/storage/import-disk-image-vm" },
+    ],
+  },
 ]
 
 export default function DocSidebar() {
   const pathname = usePathname()
-  const [isOpen, setIsOpen] = useState(false)
+  const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({})
+
+  const toggleSection = (title: string) => {
+    setOpenSections((prev) => ({ ...prev, [title]: !prev[title] }))
+  }
+
+  const renderMenuItem = (item: MenuItem) => {
+    if (item.submenu) {
+      const isOpen = openSections[item.title] || false
+      return (
+        <li key={item.title} className="mb-2">
+          <button
+            onClick={() => toggleSection(item.title)}
+            className="flex items-center justify-between w-full text-left p-2 rounded hover:bg-gray-200"
+          >
+            <span>{item.title}</span>
+            {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+          </button>
+          {isOpen && (
+            <ul className="ml-4 mt-2 space-y-2">
+              {item.submenu.map((subItem) => (
+                <li key={subItem.href}>
+                  <Link
+                    href={subItem.href}
+                    className={`block p-2 rounded ${
+                      pathname === subItem.href
+                        ? "bg-blue-500 text-white"
+                        : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
+                    }`}
+                  >
+                    {subItem.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
+        </li>
+      )
+    } else {
+      return (
+        <li key={item.href}>
+          <Link
+            href={item.href!}
+            className={`block p-2 rounded ${
+              pathname === item.href ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
+            }`}
+          >
+            {item.title}
+          </Link>
+        </li>
+      )
+    }
+  }
 
   return (
     <nav className="w-full md:w-64 bg-gray-100 p-4 md:p-6">
-      <div className="flex justify-between items-center md:block">
-        <h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2>
-        <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
-          <Menu className="h-6 w-6" />
-        </button>
-      </div>
-      <ul className={`space-y-2 ${isOpen ? "block" : "hidden"} md:block`}>
-        {sidebarItems.map((item) => (
-          <li key={item.href}>
-            <Link
-              href={item.href}
-              className={`block p-2 rounded ${
-                pathname === item.href
-                  ? "bg-blue-500 text-white"
-                  : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
-              }`}
-              onClick={() => setIsOpen(false)}
-            >
-              {item.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
+      <h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2>
+      <ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul>
     </nav>
   )
 }