update

web/app/docs/hardware/coral-tpu-lxc.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Coral TPU to an LXC | ProxMenux Documentation",
+  description: "Learn how to add a Coral TPU to an LXC container in Proxmox VE using ProxMenux.",
+}
+
+export default function CoralTPULXC() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Coral TPU to an LXC</h1>
+      <p className="mb-4">
+        This guide will walk you through the process of adding a Coral TPU to an LXC container in Proxmox VE using
+        ProxMenux.
+      </p>
+      {/* Add more content here */}
+    </div>
+  )
+}
+

web/app/docs/hardware/igpu-acceleration-lxc.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "HW iGPU acceleration to an LXC | ProxMenux Documentation",
+  description: "Learn how to enable hardware iGPU acceleration for an LXC container in Proxmox VE using ProxMenux.",
+}
+
+export default function IGPUAccelerationLXC() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">HW iGPU acceleration to an LXC</h1>
+      <p className="mb-4">
+        This guide will walk you through the process of enabling hardware iGPU acceleration for an LXC container in
+        Proxmox VE using ProxMenux.
+      </p>
+      {/* Add more content here */}
+    </div>
+  )
+}
+

web/app/docs/hardware/install-coral-tpu-host.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Install Coral TPU on the Host | ProxMenux Documentation",
+  description: "Learn how to install a Coral TPU on the Proxmox VE host using ProxMenux.",
+}
+
+export default function InstallCoralTPUHost() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Install Coral TPU on the Host</h1>
+      <p className="mb-4">
+        This guide will walk you through the process of installing a Coral TPU on your Proxmox VE host using ProxMenux.
+      </p>
+      {/* Add more content here */}
+    </div>
+  )
+}
+

web/app/docs/storage/disk-passthrough-vm.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Disk Passthrough to a VM | ProxMenux Documentation",
+  description: "Learn how to set up disk passthrough to a virtual machine in Proxmox VE using ProxMenux.",
+}
+
+export default function DiskPassthroughVM() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Disk Passthrough to a VM</h1>
+      <p className="mb-4">
+        This guide will walk you through the process of setting up disk passthrough to a virtual machine in Proxmox VE
+        using ProxMenux.
+      </p>
+      {/* Add more content here */}
+    </div>
+  )
+}
+

web/app/docs/storage/import-disk-image-vm.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Import Disk Image to a VM | ProxMenux Documentation",
+  description: "Learn how to import a disk image to a virtual machine in Proxmox VE using ProxMenux.",
+}
+
+export default function ImportDiskImageVM() {
+  return (
+    <div className="max-w-3xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Import Disk Image to a VM</h1>
+      <p className="mb-4">
+        This guide will walk you through the process of importing a disk image to a virtual machine in Proxmox VE using
+        ProxMenux.
+      </p>
+      {/* Add more content here */}
+    </div>
+  )
+}
+

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: "Hardware: GPUs and Coral",
-  { title: "API", href: "/docs/api" },
+    submenu: [
-  { title: "Guides", href: "/guides" },
+      { title: "HW iGPU acceleration to an LXC", href: "/docs/hardware/igpu-acceleration-lxc" },
-  { title: "FAQ", href: "/docs/faq" },
+      { 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>
-        <h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2>
+      <ul className="space-y-2">{sidebarItems.map(renderMenuItem)}</ul>
-        <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>
     </nav>
   )
 }