// title: App shell with icon collapse, groups, badges and user footer "use client"; import { BarChart3Icon, BoxIcon, ChevronsUpDownIcon, FolderIcon, HomeIcon, InboxIcon, PlusIcon, SettingsIcon, UsersIcon, } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback } from "@/registry/default/ui/avatar"; import { Separator } from "@/registry/default/ui/separator"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger, } from "@/registry/default/ui/sidebar"; const NAV = [ { icon: HomeIcon, label: "Overview" }, { badge: 12, icon: InboxIcon, label: "Inbox" }, { icon: BarChart3Icon, label: "Analytics" }, { icon: UsersIcon, label: "Customers" }, ]; const PROJECTS = ["Website redesign", "Mobile app", "Design system"]; export default function Particle() { const [active, setActive] = useState("Overview"); return ( // The transform makes this box the containing block for the sidebar's // fixed positioning, so the demo stays inside the preview.

Acme Inc Pro plan Workspace {NAV.map((item) => ( setActive(item.label)} tooltip={item.label} > {item.badge && ( {item.badge} )} ))} Projects {PROJECTS.map((project) => ( setActive(project)} tooltip={project} > ))} MP Maya Patel maya@acme.dev

{active}

{["Revenue", "Orders", "Visitors"].map((label) => (

{label}

))}

); }