diff --git a/web/app/docs/hardware/coral-tpu-lxc.tsx b/web/app/docs/hardware/coral-tpu-lxc.tsx new file mode 100644 index 0000000..c3b7c0e --- /dev/null +++ b/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 ( +
+

Coral TPU to an LXC

+

+ This guide will walk you through the process of adding a Coral TPU to an LXC container in Proxmox VE using + ProxMenux. +

+ {/* Add more content here */} +
+ ) +} + diff --git a/web/app/docs/hardware/igpu-acceleration-lxc.tsx b/web/app/docs/hardware/igpu-acceleration-lxc.tsx new file mode 100644 index 0000000..92014ef --- /dev/null +++ b/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 ( +
+

HW iGPU acceleration to an LXC

+

+ This guide will walk you through the process of enabling hardware iGPU acceleration for an LXC container in + Proxmox VE using ProxMenux. +

+ {/* Add more content here */} +
+ ) +} + diff --git a/web/app/docs/hardware/install-coral-tpu-host.tsx b/web/app/docs/hardware/install-coral-tpu-host.tsx new file mode 100644 index 0000000..fcf563c --- /dev/null +++ b/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 ( +
+

Install Coral TPU on the Host

+

+ This guide will walk you through the process of installing a Coral TPU on your Proxmox VE host using ProxMenux. +

+ {/* Add more content here */} +
+ ) +} + diff --git a/web/app/docs/storage/disk-passthrough-vm.tsx b/web/app/docs/storage/disk-passthrough-vm.tsx new file mode 100644 index 0000000..1c02f58 --- /dev/null +++ b/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 ( +
+

Disk Passthrough to a VM

+

+ This guide will walk you through the process of setting up disk passthrough to a virtual machine in Proxmox VE + using ProxMenux. +

+ {/* Add more content here */} +
+ ) +} + diff --git a/web/app/docs/storage/import-disk-image-vm.tsx b/web/app/docs/storage/import-disk-image-vm.tsx new file mode 100644 index 0000000..b90ab2a --- /dev/null +++ b/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 ( +
+

Import Disk Image to a VM

+

+ This guide will walk you through the process of importing a disk image to a virtual machine in Proxmox VE using + ProxMenux. +

+ {/* Add more content here */} +
+ ) +} + diff --git a/web/components/DocSidebar.tsx b/web/components/DocSidebar.tsx index ded63cf..65fc3db 100644 --- a/web/components/DocSidebar.tsx +++ b/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 ( +
  • + + {isOpen && ( + + )} +
    • + ) + } else { + return ( +
  • + + {item.title} + +
    • + ) + } + } return ( ) }