// title: Docs navigation with collapsible sections (inset) "use client"; import { BookOpenIcon, ChevronRightIcon, CodeIcon, LayersIcon, type LucideIcon, } from "lucide-react"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@/registry/default/ui/collapsible"; import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarTrigger, } from "@/registry/default/ui/sidebar"; type Section = { title: string; icon: LucideIcon; pages: string[] }; const SECTIONS: Section[] = [ { icon: BookOpenIcon, pages: ["Introduction", "Installation", "Theming"], title: "Getting started", }, { icon: LayersIcon, pages: ["Button", "Dialog", "Sidebar", "Stepper"], title: "Components", }, { icon: CodeIcon, pages: ["CLI", "Registry", "MCP"], title: "Tooling" }, ]; export default function Particle() { return ( // The transform keeps the fixed sidebar inside the preview.

Acme Docs Guides {SECTIONS.map((section, i) => ( } > }> {section.pages.map((page) => ( } > {page} ))} ))}

Components / Sidebar

); }