{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-05",
  "title": "Dual-Rail Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-05/Sidebar05.svelte",
      "content": "<script 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; --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 rune-based switch with route matches\n  // (e.g. set active = 'projects' on /projects/*).\n\n  import {\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/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuSeparator,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarGroup,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarInput,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    useSidebar,\n  } from '$lib/components/ui/sidebar'\n  import { cn } from '$lib/utils'\n\n  const sidebar = useSidebar()\n\n  // Theme is hand-rolled runes state (no theme dependency): `isDark` stays\n  // false during SSR + the client's first synchronous render, so both sides\n  // agree on the Moon icon -- no hydration mismatch. The $effect below only\n  // runs in the browser, where it syncs against the real document class and\n  // the matchMedia/system signal. The transition reads as a fast icon swap.\n  let isDark = $state(false)\n  $effect(() => {\n    const root = document.documentElement\n    isDark =\n      root.classList.contains('dark') ||\n      (!root.classList.contains('light') && window.matchMedia('(prefers-color-scheme: dark)').matches)\n  })\n  function toggleTheme() {\n    isDark = !isDark\n    document.documentElement.classList.toggle('dark', isDark)\n  }\n\n  type RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'\n\n  let active = $state<RailId>('home')\n\n  const 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  ]\n  const 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.\n  function selectRail(id: RailId) {\n    if (sidebar.isMobile) {\n      active = id\n      return\n    }\n    if (sidebar.state === 'expanded' && active === id) {\n      sidebar.setOpen(false)\n      return\n    }\n    active = id\n    sidebar.setOpen(true)\n  }\n\n  const 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<!-- 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      {#each rail as item (item.id)}\n        {@const Icon = item.icon}\n        <button\n          type=\"button\"\n          aria-label={item.label}\n          aria-current={active === item.id ? 'page' : undefined}\n          class={cn(\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          onclick={() => selectRail(item.id)}\n        >\n          {#if active === item.id}\n            <span\n              class=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\"\n            ></span>\n          {/if}\n          <Icon class=\"size-4\" />\n        </button>\n      {/each}\n\n      <div class=\"bg-sidebar-border/70 my-2 h-px w-7\"></div>\n\n      {#each railLower as item (item.id)}\n        {@const Icon = item.icon}\n        <button\n          type=\"button\"\n          aria-label={item.label}\n          aria-current={active === item.id ? 'page' : undefined}\n          class={cn(\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          onclick={() => selectRail(item.id)}\n        >\n          {#if active === item.id}\n            <span\n              class=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\"\n            ></span>\n          {/if}\n          <Icon class=\"size-4\" />\n        </button>\n      {/each}\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          onclick={toggleTheme}\n        >\n          {#if isDark}\n            <Sun class=\"size-4\" />\n          {:else}\n            <Moon class=\"size-4\" />\n          {/if}\n        </button>\n\n        <DropdownMenu>\n          <DropdownMenuTrigger>\n            {#snippet child({ props })}\n              <button\n                type=\"button\"\n                aria-label=\"James Carter\"\n                {...props}\n                class={cn(\n                  (props as { class?: string }).class,\n                  '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              >\n                <Avatar class=\"size-8\">\n                  <AvatarFallback class=\"bg-sidebar-accent text-sidebar-accent-foreground text-xs\">JC</AvatarFallback>\n                </Avatar>\n              </button>\n            {/snippet}\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"min-w-56 rounded-lg\"\n            side={sidebar.isMobile ? 'top' : 'right'}\n            align=\"end\"\n            sideOffset={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...\" allowClear>\n            {#snippet prefixSnippet()}\n              <Search class=\"text-muted-foreground size-3.5\" />\n            {/snippet}\n            {#snippet suffixSnippet()}\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-xs font-medium select-none\"\n              >\n                <span>&#8984;</span>F\n              </kbd>\n            {/snippet}\n          </SidebarInput>\n        </div>\n      </SidebarHeader>\n\n      <SidebarContent>\n        {#if active === 'home'}\n          <!-- HOME: full workspace nav -->\n          <SidebarGroup>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem>\n                  <SidebarMenuButton isActive>\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        {:else if active === 'projects'}\n          <!-- PROJECTS: pinned and recent 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        {:else if active === 'inbox'}\n          <!-- INBOX: notifications list -->\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        {:else if active === 'messages'}\n          <!-- MESSAGES: conversations -->\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-xs\">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-xs\">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-xs\">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        {:else if active === 'support'}\n          <!-- SUPPORT: help links -->\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        {:else if active === 'settings'}\n          <!-- SETTINGS: workspace 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        {/if}\n      </SidebarContent>\n    </div>\n  </div>\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-05/Sidebar05.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-05/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page wired by `npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-05.json`.\n  // The dual-rail layout needs both width vars on SidebarProvider (see\n  // Sidebar05.svelte for the why) -- they're inlined here so the route just\n  // works after install.\n  import Sidebar05 from '$lib/components/blocks/sidebar-05/Sidebar05.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider style=\"--sidebar-width: 19.5rem; --sidebar-width-icon: 3.5rem\">\n  <Sidebar05 />\n  <SidebarInset>\n    <header class=\"border-border flex h-14 shrink-0 items-center gap-3 border-b px-4\">\n      <SidebarTrigger class=\"size-7\" />\n      <h1 class=\"text-sm font-semibold\">sidebar-05 demo</h1>\n    </header>\n    <div class=\"flex-1 p-6\">\n      <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n        <div class=\"bg-muted/50 aspect-video rounded-xl\"></div>\n      </div>\n      <div class=\"bg-muted/50 mt-4 min-h-[60vh] rounded-xl\"></div>\n    </div>\n  </SidebarInset>\n</SidebarProvider>\n",
      "type": "registry:block",
      "target": "~/src/routes/sidebar-05-demo/+page.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json",
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/dropdown-menu.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": [
    "layout",
    "sidebar"
  ]
}