{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-nav",
  "title": "Sidebar navigation shell",
  "description": "A collapsible icon-sidebar app shell with grouped menus, badges, a top bar, and a main area for the page — a card grid by default, or the children you pass in.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "avatar",
    "separator",
    "card",
    "https://www.quilldesignsystem.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/blocks/sidebar-nav.tsx",
      "content": "import {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/components/ui/sidebar'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Separator } from '@/components/ui/separator'\nimport { Icon } from '@/components/ui/icon'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst workspace = [\n  { icon: 'space_dashboard', label: 'Overview', badge: '', active: true },\n  { icon: 'ink_pen', label: 'Engagements', badge: '4', active: false },\n  { icon: 'palette', label: 'Clients', badge: '', active: false },\n  { icon: 'photo_library', label: 'Deliverables', badge: '12', active: false },\n] as const\n\nconst team = [\n  { icon: 'group', label: 'Collaborators' },\n  { icon: 'settings', label: 'Settings' },\n] as const\n\n/** A collapsible icon-sidebar app shell with grouped menus, badges, a top bar, and a main area for the page — a card grid by default, or the children you pass in. */\nexport function SidebarNav({ children }: { children?: React.ReactNode }) {\n  return (\n    <SidebarProvider>\n      <div className=\"flex h-[560px] w-full\">\n        <Sidebar collapsible=\"icon\">\n          <SidebarHeader className=\"px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"flex size-7 items-center justify-center rounded-md bg-primary text-xs font-medium text-primary-foreground\">\n                Q\n              </span>\n              <span className=\"font-heading text-sm font-medium text-foreground group-data-[collapsible=icon]:hidden\">\n                Quill\n              </span>\n            </div>\n          </SidebarHeader>\n          <Separator />\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {workspace.map((item) => (\n                    <SidebarMenuItem key={item.label}>\n                      <SidebarMenuButton isActive={item.active} tooltip={item.label}>\n                        <Icon name={item.icon as never} />\n                        <span>{item.label}</span>\n                      </SidebarMenuButton>\n                      {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n            <SidebarGroup>\n              <SidebarGroupLabel>Team</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {team.map((item) => (\n                    <SidebarMenuItem key={item.label}>\n                      <SidebarMenuButton tooltip={item.label}>\n                        <Icon name={item.icon as never} />\n                        <span>{item.label}</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <Separator />\n          <SidebarFooter className=\"px-4 py-3\">\n            <div className=\"flex items-center gap-2\">\n              <Avatar size=\"sm\">\n                <AvatarFallback>JD</AvatarFallback>\n              </Avatar>\n              <div className=\"flex flex-col group-data-[collapsible=icon]:hidden\">\n                <span className=\"text-xs font-medium text-foreground\">John Doe</span>\n                <span className=\"text-xs text-muted-foreground\">Team plan</span>\n              </div>\n            </div>\n          </SidebarFooter>\n          <SidebarRail />\n        </Sidebar>\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <header className=\"flex items-center gap-3 border-b border-border px-4 py-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"h-4\" />\n            {children ? (\n              // A page passed in brings its own page-header breadcrumb, so the\n              // shell keeps the top bar to the trigger and the workspace name.\n              <span className=\"text-sm text-muted-foreground\">Workspace</span>\n            ) : (\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem>\n                    <BreadcrumbLink href=\"#\">Workspace</BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Overview</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            )}\n          </header>\n          <main className=\"flex flex-1 flex-col gap-6 overflow-auto p-4\">\n            {children ?? (\n              <div className=\"grid grid-cols-3 gap-4 max-lg:grid-cols-1\">\n                {['Active engagements', 'Review queue', 'Client notes'].map((title) => (\n                  <Card key={title} size=\"sm\">\n                    <CardContent className=\"flex h-32 flex-col gap-1\">\n                      <span className=\"text-sm font-medium text-foreground\">{title}</span>\n                      <span className=\"text-xs text-muted-foreground\">Nothing pressing.</span>\n                    </CardContent>\n                  </Card>\n                ))}\n              </div>\n            )}\n          </main>\n        </div>\n      </div>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/sidebar-nav.tsx"
    }
  ],
  "meta": {
    "intent": [
      "app-shell",
      "navigation"
    ],
    "use_when": "You need a collapsible icon-sidebar app shell with grouped menus and a content area."
  },
  "docs": "A collapsible icon-sidebar app shell with grouped menus, badges, a top bar, and a main area for the page — a card grid by default, or the children you pass in. Do: Group sidebar items under labeled sections (e.g. \"Workspace\", \"Studio\"), as this block already does, rather than one long flat list. Don't: List every nav item at the same level with no grouping once the count grows past a handful. Use dashboard when you need a simpler, fixed-width text sidebar without the icon-collapse behavior. Use mail-shell when the main content area is a two-pane message list/reading layout, not a card grid.",
  "categories": [
    "app-shell",
    "navigation"
  ],
  "type": "registry:block"
}