{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-05",
  "title": "Sidebar 05",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-05/Sidebar05.vue",
      "content": "<script setup lang=\"ts\">\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 ref-based switch with route matches\n// (e.g. set active = 'projects' on /projects/*).\n\nimport { computed, onMounted, ref } from 'vue'\nimport { useTheme } from '~/composables/useTheme'\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-vue-next'\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\nconst { isMobile, state, setOpen } = useSidebar()\nconst { theme, setTheme } = useTheme()\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 `onMounted`\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 Vue hydration warning.\nconst mounted = ref(false)\nonMounted(() => {\n  mounted.value = true\n})\nconst isDark = computed(\n  () =>\n    mounted.value &&\n    (theme.value === 'dark' || (theme.value === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)),\n)\n\ntype RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'\n\nconst active = ref<RailId>('home')\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\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.\nfunction selectRail(id: RailId) {\n  if (isMobile.value) {\n    active.value = id\n    return\n  }\n  if (state.value === 'expanded' && active.value === id) {\n    setOpen(false)\n    return\n  }\n  active.value = id\n  setOpen(true)\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</script>\n\n<template>\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 class=\"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 class=\"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          class=\"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\" class=\"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        <button\n          v-for=\"item in rail\"\n          :key=\"item.id\"\n          type=\"button\"\n          :aria-label=\"item.label\"\n          :aria-current=\"active === item.id ? 'page' : undefined\"\n          :class=\"[\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          ]\"\n          @click=\"selectRail(item.id)\"\n        >\n          <span\n            v-if=\"active === item.id\"\n            class=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\"\n          />\n          <component :is=\"item.icon\" class=\"size-4\" />\n        </button>\n\n        <div class=\"bg-sidebar-border/70 my-2 h-px w-7\" />\n\n        <button\n          v-for=\"item in railLower\"\n          :key=\"item.id\"\n          type=\"button\"\n          :aria-label=\"item.label\"\n          :aria-current=\"active === item.id ? 'page' : undefined\"\n          :class=\"[\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          ]\"\n          @click=\"selectRail(item.id)\"\n        >\n          <span\n            v-if=\"active === item.id\"\n            class=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\"\n          />\n          <component :is=\"item.icon\" class=\"size-4\" />\n        </button>\n\n        <div class=\"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            class=\"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            @click=\"setTheme(isDark ? 'light' : 'dark')\"\n          >\n            <Sun v-if=\"isDark\" class=\"size-4\" />\n            <Moon v-else class=\"size-4\" />\n          </button>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <button\n                type=\"button\"\n                aria-label=\"James Carter\"\n                class=\"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 class=\"size-8\">\n                  <AvatarFallback class=\"bg-sidebar-accent text-sidebar-accent-foreground text-xs\">JC</AvatarFallback>\n                </Avatar>\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              class=\"min-w-56 rounded-lg\"\n              :side=\"isMobile ? 'top' : 'right'\"\n              align=\"end\"\n              :side-offset=\"8\"\n            >\n              <DropdownMenuLabel class=\"p-0 font-normal\">\n                <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar class=\"size-8 rounded-lg\">\n                    <AvatarFallback class=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs\"\n                      >JC</AvatarFallback\n                    >\n                  </Avatar>\n                  <div class=\"grid flex-1 leading-tight\">\n                    <span class=\"truncate font-medium\">James Carter</span>\n                    <span class=\"text-muted-foreground truncate text-xs\">Admin</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem> <Send class=\"size-4\" /> Invite teammates </DropdownMenuItem>\n              <DropdownMenuItem> <SettingsIcon class=\"size-4\" /> Workspace settings </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 class=\"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\n                  class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg\"\n                >\n                  <svg viewBox=\"0 0 24 24\" class=\"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 class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"font-display truncate font-bold\">uipkge</span>\n                  <span class=\"text-muted-foreground truncate text-xs\">{{ titles[active] }}</span>\n                </div>\n                <ChevronsUpDown class=\"ml-auto size-4\" />\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n\n          <div class=\"px-1 pt-1\">\n            <SidebarInput type=\"text\" placeholder=\"Search...\" :allow-clear=\"true\">\n              <template #prefix>\n                <Search class=\"text-muted-foreground size-3.5\" />\n              </template>\n              <template #suffix>\n                <kbd\n                  class=\"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                >\n                  <span>&#8984;</span>F\n                </kbd>\n              </template>\n            </SidebarInput>\n          </div>\n        </SidebarHeader>\n\n        <SidebarContent>\n          <!-- HOME: full workspace nav -->\n          <template v-if=\"active === 'home'\">\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton is-active>\n                      <LayoutDashboard class=\"size-4\" />\n                      <span>Dashboard</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Users class=\"size-4\" />\n                      <span>Employees</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Briefcase class=\"size-4\" />\n                      <span>Clients</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Folder class=\"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 class=\"size-4\" />\n                      <span>Calendar</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <ClipboardList class=\"size-4\" />\n                      <span>Attendance</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Mail class=\"size-4\" />\n                      <span>Mail</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <ChartLine class=\"size-4\" />\n                      <span>Analytics</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n\n          <!-- PROJECTS: pinned and recent projects -->\n          <template v-else-if=\"active === 'projects'\">\n            <SidebarGroup>\n              <SidebarGroupLabel>Pinned</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <div\n                        class=\"bg-chart-1 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                      >\n                        <Folder class=\"size-3\" />\n                      </div>\n                      <span>Shift Planner</span>\n                      <Star class=\"text-warning ml-auto size-3.5 fill-current\" />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <div\n                        class=\"bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                      >\n                        <Folder class=\"size-3\" />\n                      </div>\n                      <span>Training Portal</span>\n                      <Star class=\"text-warning ml-auto size-3.5 fill-current\" />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <div\n                        class=\"bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                      >\n                        <Folder class=\"size-3\" />\n                      </div>\n                      <span>Performance Hub</span>\n                      <Star class=\"text-warning ml-auto size-3.5 fill-current\" />\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <div\n                        class=\"bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                      >\n                        <Folder class=\"size-3\" />\n                      </div>\n                      <span>Expense Claims</span>\n                      <Star class=\"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 class=\"size-4\" />\n                      <span>Onboarding 2026</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Folder class=\"size-4\" />\n                      <span>Q1 hiring plan</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Folder class=\"size-4\" />\n                      <span>Compliance refresh</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n\n          <!-- INBOX: notifications list -->\n          <template v-else-if=\"active === 'inbox'\">\n            <SidebarGroup>\n              <SidebarGroupLabel>Today</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Inbox class=\"size-4\" />\n                      <span>3 PTO requests pending</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Bell class=\"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 class=\"size-4\" />\n                      <span>5 contracts awaiting sign-off</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Users class=\"size-4\" />\n                      <span>2 new hires start Monday</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n\n          <!-- MESSAGES: conversations -->\n          <template v-else-if=\"active === 'messages'\">\n            <SidebarGroup>\n              <SidebarGroupLabel>Direct messages</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Avatar class=\"size-5\">\n                        <AvatarFallback class=\"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 class=\"size-5\">\n                        <AvatarFallback class=\"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 class=\"size-5\">\n                        <AvatarFallback class=\"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 class=\"size-4\" />\n                      <span># announcements</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <MessageSquare class=\"size-4\" />\n                      <span># hiring</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n\n          <!-- SUPPORT: help links -->\n          <template v-else-if=\"active === 'support'\">\n            <SidebarGroup>\n              <SidebarGroupLabel>Help center</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <HelpCircle class=\"size-4\" />\n                      <span>Getting started</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <FileText class=\"size-4\" />\n                      <span>Onboarding guide</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Send class=\"size-4\" />\n                      <span>Contact support</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n\n          <!-- SETTINGS: workspace settings -->\n          <template v-else-if=\"active === 'settings'\">\n            <SidebarGroup>\n              <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <SettingsIcon class=\"size-4\" />\n                      <span>General</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Users class=\"size-4\" />\n                      <span>Members</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <CreditCard class=\"size-4\" />\n                      <span>Billing</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Gauge class=\"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 class=\"size-4\" />\n                      <span>Security</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                  <SidebarMenuItem>\n                    <SidebarMenuButton>\n                      <Bell class=\"size-4\" />\n                      <span>Notifications</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </template>\n        </SidebarContent>\n      </div>\n    </div>\n  </Sidebar>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Sidebar05.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/sidebar.json",
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/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"
  ]
}