{ "schemaVersion": 1, "name": "sidebar", "useFor": "Use for an app's main navigation (an order console, a developer dashboard). Wrap the page in SidebarProvider with the Sidebar and a SidebarInset beside it; put the wordmark or a switcher in SidebarHeader, groups of SidebarMenu rows in SidebarContent and the account in SidebarFooter. Mark the current row with isActive. Set collapsible=\"icon\" to let it narrow to glyphs (give rows a tooltip), floating or inset for the window looks. On phones it opens in the sheet; Cmd or Ctrl and B toggles it.", "constraints": [ "More than seven top-level rows", "Nested rows two levels deep", "A sidebar on a marketing page", "Icons without labels when expanded" ], "documentation": "", "source": "Extension from opencommerce-agentcard-web src/app/globals.css (.nav-link, .win)", "exports": [ "Sidebar", "SidebarContent", "SidebarFooter", "SidebarGroup", "SidebarGroupAction", "SidebarGroupContent", "SidebarGroupLabel", "SidebarHeader", "SidebarInput", "SidebarInset", "SidebarMenu", "SidebarMenuAction", "SidebarMenuBadge", "SidebarMenuButton", "SidebarMenuItem", "SidebarMenuSkeleton", "SidebarMenuSub", "SidebarMenuSubButton", "SidebarMenuSubItem", "SidebarProvider", "SidebarRail", "SidebarSeparator", "SidebarTrigger", "useSidebar" ], "client": true, "docsUrl": "https://opencommerce-ds.vercel.app/components/sidebar", "markdownUrl": "https://opencommerce-ds.vercel.app/r/sidebar.md", "examples": [ { "path": "examples/sidebar.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { BarChart3, BookOpen, ChevronsUpDown, CreditCard, KeyRound, LifeBuoy, PanelLeftClose, Plus, Search, ShoppingBag, Store, Webhook } from \"lucide-react\";\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n useSidebar,\n} from \"@/components/ui/sidebar\";\n\nconst MAIN = [\n { id: \"orders\", label: \"Orders\", icon: ShoppingBag, count: \"12\" },\n { id: \"merchants\", label: \"Merchants\", icon: Store },\n { id: \"cards\", label: \"Cards\", icon: CreditCard },\n { id: \"monitoring\", label: \"Monitoring\", icon: BarChart3, mark: \"Live\" },\n];\nconst DEVELOPERS = [\n { id: \"keys\", label: \"API keys\", icon: KeyRound },\n { id: \"webhooks\", label: \"Webhooks\", icon: Webhook },\n { id: \"docs\", label: \"Docs\", icon: BookOpen },\n];\n\nfunction Wordmark() {\n return (\n \n opencommerce\n by Agentcard\n \n );\n}\n\nfunction CollapseRow() {\n const { toggleSidebar, state } = useSidebar();\n return (\n \n \n \n {state === \"expanded\" ? \"Collapse\" : \"Expand\"}\n \n \n );\n}\n\nfunction Rail({ collapsible = \"offcanvas\", variant = \"sidebar\" }: { collapsible?: \"offcanvas\" | \"icon\" | \"none\"; variant?: \"sidebar\" | \"floating\" | \"inset\" }) {\n const [current, setCurrent] = React.useState(\"orders\");\n const [sub, setSub] = React.useState(\"all\");\n return (\n \n \n \n \n \n \n \n Commerce\n \n \n {MAIN.map((item) => (\n \n setCurrent(item.id)}>\n \n {item.label}\n \n {item.count && {item.count}}\n {item.mark && {item.mark}}\n {item.id === \"orders\" && current === \"orders\" && (\n \n {[\n [\"all\", \"All orders\"],\n [\"failed\", \"Failed checkouts\"],\n [\"returns\", \"Returns\"],\n ].map(([id, label]) => (\n \n {\n event.preventDefault();\n setSub(id);\n }}\n >\n {label}\n \n \n ))}\n \n )}\n \n ))}\n \n \n \n \n Developers\n \n \n \n \n \n {DEVELOPERS.map((item) => (\n \n setCurrent(item.id)}>\n \n {item.label}\n \n \n ))}\n \n \n \n \n \n \n \n \n \n Help\n \n \n \n \n A\n \n Acme Labs\n Standard plan\n \n \n \n \n {collapsible === \"icon\" && }\n \n \n \n \n );\n}\n\nfunction Page({ title }: { title: string }) {\n return (\n \n
\n \n

{title}

\n \n \n ⌘B toggles the rail\n \n
\n
\n {[\"ord_8KQ2 · Northwind Outfitters · $222.00\", \"ord_8KR9 · Contoso Coffee · $48.50\", \"ord_8KS6 · Litware Books · $31.20\"].map((row) => (\n
\n {row}\n
\n ))}\n
\n \n );\n}\n\nexport function Site() {\n return (\n \n \n \n \n );\n}\n\nexport function Icons() {\n return (\n \n \n \n \n );\n}\n\nexport function Floating() {\n return (\n \n \n \n \n );\n}\n\nexport function Inset() {\n return (\n \n \n \n \n );\n}\n\nexport function Loading() {\n return (\n \n \n \n \n \n \n \n Commerce\n \n {Array.from({ length: 5 }, (_, i) => (\n \n \n \n ))}\n \n \n \n \n \n
Loading your workspace
\n \n \n );\n}\n", "exports": [ "Site", "Icons", "Floating", "Inset", "Loading" ], "requires": [ "sidebar" ], "packages": [ "lucide-react" ], "previews": [ { "name": "Site", "url": "https://opencommerce-ds.vercel.app/preview/sidebar/Site" }, { "name": "Icons", "url": "https://opencommerce-ds.vercel.app/preview/sidebar/Icons" }, { "name": "Floating", "url": "https://opencommerce-ds.vercel.app/preview/sidebar/Floating" }, { "name": "Inset", "url": "https://opencommerce-ds.vercel.app/preview/sidebar/Inset" }, { "name": "Loading", "url": "https://opencommerce-ds.vercel.app/preview/sidebar/Loading" } ] } ], "type": "ui", "title": "Sidebar", "description": "An app's rail: a white column with a rule at its edge, quiet rows, mono group labels and the pale blue current row.", "surface": "site", "kinds": [ "nav-link" ], "requires": [ "theme", "button", "input", "separator", "sheet", "skeleton", "tooltip", "utils" ], "packages": [ "@radix-ui/react-slot", "class-variance-authority", "lucide-react" ], "files": [ { "path": "components/ui/sidebar.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelLeft } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ui/sheet\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// An app's rail, extrapolated from the brand's header links and windows (globals.css .nav-link, .win): 256px of white\n// with a 9 percent ink rule at its edge; a 64px head holds the wordmark or a switcher. Rows are 34px with 5px corners,\n// 8px in from the rail's sides: a 16px line glyph and a 14px Inter label at 64 percent ink that take a 5 percent ink\n// wash and ink text under the pointer (150ms, color only); the current row is the pale blue with blue text. A group's\n// label is the window bar's 11.5px mono at 64 percent ink. The foot is ruled off above. `floating` is the rail as one of\n// the brand's windows (12px corners, the 16 percent ink edge, the soft drop) 8px from the page's edges; `inset` sets the\n// rail on the mist with the page as a white window beside it. Collapsing to icons narrows the rail to 51px (200ms, the\n// strong ease-out); Cmd or Ctrl and B toggles it instantly; on a phone it opens in the sheet.\nconst SIDEBAR_WIDTH = \"16rem\";\nconst SIDEBAR_WIDTH_ICON = \"3.1875rem\";\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\";\nconst MOBILE_QUERY = \"(max-width: 767px)\";\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\";\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n instant: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = React.createContext(null);\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext);\n if (!context) throw new Error(\"useSidebar must be used within a SidebarProvider.\");\n return context;\n}\n\nfunction useIsMobile() {\n const [isMobile, setIsMobile] = React.useState(false);\n React.useEffect(() => {\n const query = window.matchMedia(MOBILE_QUERY);\n const update = () => setIsMobile(query.matches);\n update();\n query.addEventListener(\"change\", update);\n return () => query.removeEventListener(\"change\", update);\n }, []);\n return isMobile;\n}\n\n/**\n * Holds whether the rail is open (expanded or collapsed on a desktop, shown in a sheet on a phone). Uncontrolled with\n * `defaultOpen`, or controlled with `open` and `onOpenChange`. Nothing is stored: keep the state yourself if it should\n * survive a reload. Cmd or Ctrl and B toggles it.\n */\nfunction SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<\"div\"> & { defaultOpen?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void }) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = React.useState(false);\n const [instant, setInstant] = React.useState(false);\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const open = openProp ?? internalOpen;\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const next = typeof value === \"function\" ? value(open) : value;\n if (setOpenProp) setOpenProp(next);\n else setInternalOpen(next);\n },\n [setOpenProp, open],\n );\n const toggleSidebar = React.useCallback(() => {\n setInstant(false);\n return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);\n }, [isMobile, setOpen]);\n\n React.useEffect(() => {\n // A shortcut is pressed many times a day: it changes the rail at once, with no motion.\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== SIDEBAR_KEYBOARD_SHORTCUT || !(event.metaKey || event.ctrlKey)) return;\n event.preventDefault();\n setInstant(true);\n if (isMobile) setOpenMobile((o) => !o);\n else setOpen((o) => !o);\n };\n window.addEventListener(\"keydown\", onKeyDown);\n return () => window.removeEventListener(\"keydown\", onKeyDown);\n }, [isMobile, setOpen]);\n\n const state = open ? \"expanded\" : \"collapsed\";\n const value = React.useMemo(() => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, instant }), [state, open, setOpen, isMobile, openMobile, toggleSidebar, instant]);\n\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\n/**\n * The rail. `variant`: sidebar (the white rail with its rule), floating (a window 8px from the page's edges) or inset\n * (the rail on the mist with the page as a white window beside it). `collapsible`: offcanvas (slides away), icon\n * (narrows to its glyphs) or none.\n */\nfunction Sidebar({\n side = \"left\",\n variant = \"sidebar\",\n collapsible = \"offcanvas\",\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & { side?: \"left\" | \"right\"; variant?: \"sidebar\" | \"floating\" | \"inset\"; collapsible?: \"offcanvas\" | \"icon\" | \"none\" }) {\n const { isMobile, state, openMobile, setOpenMobile, instant } = useSidebar();\n const ground = variant === \"inset\" ? \"bg-subtle\" : \"bg-surface\";\n\n if (collapsible === \"none\") {\n return (\n
\n {children}\n
\n );\n }\n\n if (isMobile) {\n return (\n \n \n Navigation\n The app's sections and settings.\n
{children}
\n \n \n );\n }\n\n return (\n