{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-05",
  "title": "Sidebar 05",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/sidebar-05/Sidebar05.tsx",
      "content": "'use client'\n\n// Dual-rail sidebar with master/detail behavior. The thin rail picks the\n// section; the main panel renders the rows for the active section. One\n// <Sidebar collapsible=\"icon\"> contains rail + panel as inline flex siblings.\n//\n// Desktop: when collapsed (toggle clicked), the kit shrinks the sidebar to\n// --sidebar-width-icon. We set that to 3.5rem so only the rail stays.\n// The panel is hidden via group-data-[collapsible=icon] which only fires\n// on the desktop branch of <Sidebar> (the mobile <Sheet> has no `group`\n// ancestor with that attr, so mobile sheet always shows rail+panel).\n//\n// IMPORTANT: the parent <SidebarProvider> must set BOTH custom widths,\n// e.g. <SidebarProvider style={{ '--sidebar-width': '19.5rem',\n//                                '--sidebar-width-icon': '3.5rem' }}>\n// The vars set on <Sidebar> itself are too deep -- the layout-allocating\n// wrapper sits above it and reads the provider's vars.\n//\n// To wire to your router, replace the state-based switch with route matches\n// (e.g. set active = 'projects' on /projects/*).\n\nimport * as React from 'react'\nimport {\n  Bell,\n  Briefcase,\n  Calendar,\n  ChartLine,\n  ChevronsUpDown,\n  ClipboardList,\n  CreditCard,\n  FileText,\n  Folder,\n  Gauge,\n  Headphones,\n  HelpCircle,\n  Home,\n  Inbox,\n  LayoutDashboard,\n  Lock,\n  Mail,\n  MessageSquare,\n  Moon,\n  Search,\n  Send,\n  Settings as SettingsIcon,\n  Star,\n  Sun,\n  Users,\n} from 'lucide-react'\nimport { useTheme } from 'next-themes'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/components/ui/sidebar'\n\ntype RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'\n\nconst rail = [\n  { id: 'home' as const, icon: Home, label: 'Home' },\n  { id: 'projects' as const, icon: Folder, label: 'Projects' },\n  { id: 'inbox' as const, icon: Bell, label: 'Inbox' },\n  { id: 'messages' as const, icon: MessageSquare, label: 'Messages' },\n]\nconst railLower = [\n  { id: 'support' as const, icon: Headphones, label: 'Support' },\n  { id: 'settings' as const, icon: SettingsIcon, label: 'Settings' },\n]\n\nconst titles: Record<RailId, string> = {\n  home: 'Workspace',\n  projects: 'Projects',\n  inbox: 'Inbox',\n  messages: 'Messages',\n  support: 'Support',\n  settings: 'Settings',\n}\n\nexport function Sidebar05() {\n  const { isMobile, state, setOpen } = useSidebar()\n  const { theme, setTheme } = useTheme()\n\n  // `mounted` stays false during SSR + the client's first synchronous\n  // render, so isDark is also false on both sides -- no hydration\n  // mismatch on the Sun/Moon icon. Once hydration settles the effect\n  // flips the flag and the computed re-runs against the real\n  // matchMedia/system signal. The transition reads as a fast icon\n  // swap instead of a React hydration warning.\n  const [mounted, setMounted] = React.useState(false)\n  React.useEffect(() => setMounted(true), [])\n  const isDark =\n    mounted &&\n    (theme === 'dark' ||\n      (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches))\n\n  const [active, setActive] = React.useState<RailId>('home')\n\n  // Slack-style rail click: expand the panel if collapsed, or collapse if\n  // the user clicks the already-active icon while expanded. On mobile the\n  // sheet open/close is owned by the inset trigger, so we just swap active.\n  function selectRail(id: RailId) {\n    if (isMobile) {\n      setActive(id)\n      return\n    }\n    if (state === 'expanded' && active === id) {\n      setOpen(false)\n      return\n    }\n    setActive(id)\n    setOpen(true)\n  }\n\n  return (\n    // Single Sidebar primitive containing BOTH rails inline. On desktop the\n    // rail (56px) stays visible when the sidebar is collapsed thanks to\n    // collapsible=\"icon\" + --sidebar-width-icon: 3.5rem; the panel is\n    // hidden only when state=collapsed. On mobile the kit's <Sheet>\n    // renders the entire dual rail inside a single sheet pane.\n    <Sidebar collapsible=\"icon\">\n      <div className=\"flex h-full w-full\">\n        {/* Thin icon rail -- 56px wide. Clicking an icon updates `active`\n            which swaps the main panel content below. */}\n        <aside className=\"border-sidebar-border flex w-14 shrink-0 flex-col items-center gap-0.5 border-r py-2\">\n          <button\n            type=\"button\"\n            aria-label=\"uipkge\"\n            className=\"bg-sidebar-primary text-sidebar-primary-foreground mb-1 flex aspect-square size-9 items-center justify-center rounded-lg shadow-sm ring-1 ring-white/10 transition-transform ring-inset hover:scale-105\"\n          >\n            <svg viewBox=\"0 0 24 24\" className=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n              <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n              <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n              <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n              <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n            </svg>\n          </button>\n\n          {rail.map((item) => (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-label={item.label}\n              aria-current={active === item.id ? 'page' : undefined}\n              className={[\n                'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',\n                active === item.id\n                  ? 'bg-sidebar-accent text-foreground'\n                  : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',\n              ].join(' ')}\n              onClick={() => selectRail(item.id)}\n            >\n              {active === item.id && (\n                <span className=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\" />\n              )}\n              <item.icon className=\"size-4\" />\n            </button>\n          ))}\n\n          <div className=\"bg-sidebar-border/70 my-2 h-px w-7\" />\n\n          {railLower.map((item) => (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-label={item.label}\n              aria-current={active === item.id ? 'page' : undefined}\n              className={[\n                'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',\n                active === item.id\n                  ? 'bg-sidebar-accent text-foreground'\n                  : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',\n              ].join(' ')}\n              onClick={() => selectRail(item.id)}\n            >\n              {active === item.id && (\n                <span className=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\" />\n              )}\n              <item.icon className=\"size-4\" />\n            </button>\n          ))}\n\n          <div className=\"mt-auto flex flex-col items-center gap-1.5\">\n            <button\n              type=\"button\"\n              aria-label={isDark ? 'Switch to light theme' : 'Switch to dark theme'}\n              className=\"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground flex aspect-square size-9 items-center justify-center rounded-lg transition-colors\"\n              onClick={() => setTheme(isDark ? 'light' : 'dark')}\n            >\n              {isDark ? <Sun className=\"size-4\" /> : <Moon className=\"size-4\" />}\n            </button>\n\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <button\n                  type=\"button\"\n                  aria-label=\"James Carter\"\n                  className=\"ring-offset-sidebar focus-visible:ring-ring data-[state=open]:ring-ring rounded-full transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-[state=open]:ring-2\"\n                >\n                  <Avatar className=\"size-8\">\n                    <AvatarFallback className=\"bg-sidebar-accent text-sidebar-accent-foreground text-xs\">\n                      JC\n                    </AvatarFallback>\n                  </Avatar>\n                </button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"min-w-56 rounded-lg\"\n                side={isMobile ? 'top' : 'right'}\n                align=\"end\"\n                sideOffset={8}\n              >\n                <DropdownMenuLabel className=\"p-0 font-normal\">\n                  <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar className=\"size-8 rounded-lg\">\n                      <AvatarFallback className=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs\">\n                        JC\n                      </AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 leading-tight\">\n                      <span className=\"truncate font-medium\">James Carter</span>\n                      <span className=\"text-muted-foreground truncate text-xs\">Admin</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Send className=\"size-4\" /> Invite teammates\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <SettingsIcon className=\"size-4\" /> Workspace settings\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </aside>\n\n        {/* Main panel -- header is the same for every section; the content\n            area swaps based on `active`. Each section's rows are spelled out\n            inline so consumers can edit them in place.\n            Hidden on desktop when state=collapsed (rail stays). The mobile\n            <Sheet> branch in <Sidebar> has no data-collapsible group, so this\n            rule never applies on mobile -- the sheet always shows rail + panel. */}\n        <div className=\"flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden\">\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg\">\n                    <svg viewBox=\"0 0 24 24\" className=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n                      <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                      <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                      <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                      <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                    </svg>\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"font-display truncate font-bold\">uipkge</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">{titles[active]}</span>\n                  </div>\n                  <ChevronsUpDown className=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n\n            <div className=\"px-1 pt-1\">\n              <SidebarInput\n                type=\"text\"\n                placeholder=\"Search...\"\n                allowClear\n                prefix={<Search className=\"text-muted-foreground size-3.5\" />}\n                suffix={\n                  <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-[10px] font-medium select-none\">\n                    <span>&#8984;</span>F\n                  </kbd>\n                }\n              />\n            </div>\n          </SidebarHeader>\n\n          <SidebarContent>\n            {/* HOME: full workspace nav */}\n            {active === 'home' && (\n              <>\n                <SidebarGroup>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton isActive>\n                          <LayoutDashboard className=\"size-4\" />\n                          <span>Dashboard</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Users className=\"size-4\" />\n                          <span>Employees</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Briefcase className=\"size-4\" />\n                          <span>Clients</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Folder className=\"size-4\" />\n                          <span>Projects</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n\n                <SidebarGroup>\n                  <SidebarGroupLabel>Workforce</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Calendar className=\"size-4\" />\n                          <span>Calendar</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <ClipboardList className=\"size-4\" />\n                          <span>Attendance</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Mail className=\"size-4\" />\n                          <span>Mail</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <ChartLine className=\"size-4\" />\n                          <span>Analytics</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              </>\n            )}\n\n            {/* PROJECTS: pinned and recent projects */}\n            {active === 'projects' && (\n              <>\n                <SidebarGroup>\n                  <SidebarGroupLabel>Pinned</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <div className=\"bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                            <Folder className=\"size-3\" />\n                          </div>\n                          <span>Shift Planner</span>\n                          <Star className=\"text-warning ml-auto size-3.5 fill-current\" />\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <div className=\"bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                            <Folder className=\"size-3\" />\n                          </div>\n                          <span>Training Portal</span>\n                          <Star className=\"text-warning ml-auto size-3.5 fill-current\" />\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <div className=\"bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                            <Folder className=\"size-3\" />\n                          </div>\n                          <span>Performance Hub</span>\n                          <Star className=\"text-warning ml-auto size-3.5 fill-current\" />\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <div className=\"bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\">\n                            <Folder className=\"size-3\" />\n                          </div>\n                          <span>Expense Claims</span>\n                          <Star className=\"text-warning ml-auto size-3.5 fill-current\" />\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n\n                <SidebarGroup>\n                  <SidebarGroupLabel>Recent</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Folder className=\"size-4\" />\n                          <span>Onboarding 2026</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Folder className=\"size-4\" />\n                          <span>Q1 hiring plan</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Folder className=\"size-4\" />\n                          <span>Compliance refresh</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              </>\n            )}\n\n            {/* INBOX: notifications list */}\n            {active === 'inbox' && (\n              <>\n                <SidebarGroup>\n                  <SidebarGroupLabel>Today</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Inbox className=\"size-4\" />\n                          <span>3 PTO requests pending</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Bell className=\"size-4\" />\n                          <span>Payroll cycle closes today</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n\n                <SidebarGroup>\n                  <SidebarGroupLabel>This week</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <FileText className=\"size-4\" />\n                          <span>5 contracts awaiting sign-off</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Users className=\"size-4\" />\n                          <span>2 new hires start Monday</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              </>\n            )}\n\n            {/* MESSAGES: conversations */}\n            {active === 'messages' && (\n              <>\n                <SidebarGroup>\n                  <SidebarGroupLabel>Direct messages</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Avatar className=\"size-5\">\n                            <AvatarFallback className=\"bg-chart-1/15 text-foreground text-[10px]\">OB</AvatarFallback>\n                          </Avatar>\n                          <span>Olivia Bennett</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Avatar className=\"size-5\">\n                            <AvatarFallback className=\"bg-chart-2/15 text-foreground text-[10px]\">DM</AvatarFallback>\n                          </Avatar>\n                          <span>Daniel Morgan</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Avatar className=\"size-5\">\n                            <AvatarFallback className=\"bg-chart-3/15 text-foreground text-[10px]\">ER</AvatarFallback>\n                          </Avatar>\n                          <span>Ethan Reynolds</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n\n                <SidebarGroup>\n                  <SidebarGroupLabel>Channels</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <MessageSquare className=\"size-4\" />\n                          <span># announcements</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <MessageSquare className=\"size-4\" />\n                          <span># hiring</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              </>\n            )}\n\n            {/* SUPPORT: help links */}\n            {active === 'support' && (\n              <SidebarGroup>\n                <SidebarGroupLabel>Help center</SidebarGroupLabel>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <HelpCircle className=\"size-4\" />\n                        <span>Getting started</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <FileText className=\"size-4\" />\n                        <span>Onboarding guide</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <Send className=\"size-4\" />\n                        <span>Contact support</span>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            )}\n\n            {/* SETTINGS: workspace settings */}\n            {active === 'settings' && (\n              <>\n                <SidebarGroup>\n                  <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <SettingsIcon className=\"size-4\" />\n                          <span>General</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Users className=\"size-4\" />\n                          <span>Members</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <CreditCard className=\"size-4\" />\n                          <span>Billing</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Gauge className=\"size-4\" />\n                          <span>Limits</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n\n                <SidebarGroup>\n                  <SidebarGroupLabel>Account</SidebarGroupLabel>\n                  <SidebarGroupContent>\n                    <SidebarMenu>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Lock className=\"size-4\" />\n                          <span>Security</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                      <SidebarMenuItem>\n                        <SidebarMenuButton>\n                          <Bell className=\"size-4\" />\n                          <span>Notifications</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              </>\n            )}\n          </SidebarContent>\n        </div>\n      </div>\n    </Sidebar>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/Sidebar05.tsx"
    },
    {
      "path": "packages/registry-react/blocks/sidebar-05/page.tsx",
      "content": "// Demo page wired by `npx shadcn@latest add https://uipkge.dev/r/react/sidebar-05.json`.\n// The dual-rail layout needs both width vars on SidebarProvider (see\n// Sidebar05.tsx for the why) -- they're inlined here so the route just\n// works after install.\nimport type { CSSProperties } from 'react'\nimport { Sidebar05 } from '@/components/blocks/Sidebar05'\nimport { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'\n\nconst sidebarWidths = {\n  '--sidebar-width': '19.5rem',\n  '--sidebar-width-icon': '3.5rem',\n} as CSSProperties\n\nexport default function Page() {\n  return (\n    <SidebarProvider style={sidebarWidths}>\n      <Sidebar05 />\n      <SidebarInset>\n        <header className=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n          <SidebarTrigger className=\"size-7\" />\n          <h1 className=\"text-sm font-semibold\">sidebar-05 demo</h1>\n        </header>\n        <div className=\"flex-1 p-6\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}",
      "type": "registry:block",
      "target": "~/app/sidebar-05-demo/page.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/sidebar.json",
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/use-theme.json"
  ],
  "description": "Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible=\"icon\": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style={{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }}. Modeled on the GR8R HRMS admin shell.",
  "categories": [
    "sidebar",
    "layout"
  ]
}