{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-01",
  "title": "Icon Rail Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-01/Sidebar01.svelte",
      "content": "<script lang=\"ts\">\n  // Edit this file to change brand, navigation, and the user dropdown.\n  // Every menu item is spelled out below -- copy, remove, or rename rows directly.\n  import { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from '@lucide/svelte'\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarMenu,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarRail,\n  } from '$lib/components/ui/sidebar'\n  import NavUser from './NavUser.svelte'\n</script>\n\n<Sidebar data-slot=\"sidebar-01\" collapsible=\"icon\">\n  <SidebarHeader>\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton size=\"lg\" tooltip=\"uipkge\" class=\"group-data-[collapsible=icon]:!justify-center\">\n          <div\n            class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg group-data-[collapsible=icon]:size-6\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"size-4 group-data-[collapsible=icon]:size-3.5\"\n              fill=\"currentColor\"\n              aria-hidden=\"true\"\n            >\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 group-data-[collapsible=icon]:hidden\">\n            <span class=\"font-display truncate font-bold\">uipkge</span>\n            <span class=\"text-muted-foreground truncate text-xs\">uipkge.dev</span>\n          </div>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarHeader>\n\n  <SidebarContent>\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspace</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <!-- TODO: wrap in an <a href=\"...\"> and bind isActive to your route -->\n            <SidebarMenuButton isActive tooltip=\"Dashboard\">\n              <LayoutDashboard class=\"size-4\" />\n              <span>Dashboard</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Data tables\">\n              <TableIcon class=\"size-4\" />\n              <span>Data tables</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Forms\">\n              <FileText class=\"size-4\" />\n              <span>Forms</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Charts\">\n              <BarChart3 class=\"size-4\" />\n              <span>Charts</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Pages\">\n              <Files class=\"size-4\" />\n              <span>Pages</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Resources</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Docs\">\n              <BookOpen class=\"size-4\" />\n              <span>Docs</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Changelog\">\n              <History class=\"size-4\" />\n              <span>Changelog</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </SidebarContent>\n\n  <SidebarFooter>\n    <NavUser />\n  </SidebarFooter>\n\n  <SidebarRail />\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-01/Sidebar01.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-01/NavUser.svelte",
      "content": "<script lang=\"ts\">\n  // Edit this file to change the user dropdown content, avatar, and logout handler.\n  // The user details are inlined below -- wire them to your auth session in place.\n  import { onMount } from 'svelte'\n  import { BadgeCheck, ChevronsUpDown, LogOut, Monitor, Moon, Palette, Settings, Sun } from '@lucide/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuGroup,\n    DropdownMenuItem,\n    DropdownMenuLabel,\n    DropdownMenuRadioGroup,\n    DropdownMenuRadioItem,\n    DropdownMenuSeparator,\n    DropdownMenuSub,\n    DropdownMenuSubContent,\n    DropdownMenuSubTrigger,\n    DropdownMenuTrigger,\n  } from '$lib/components/ui/dropdown-menu'\n  import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '$lib/components/ui/sidebar'\n\n  const sidebar = useSidebar()\n\n  // Replace these with your auth session.\n  const user = {\n    name: 'Test User',\n    email: 'you@example.com',\n    initials: 'TU',\n  }\n\n  // Local theme model: 'system' follows the OS preference, explicit choices\n  // pin the `dark` class and persist to localStorage. Swap this for your\n  // app-wide theme store after installing.\n  type Theme = 'light' | 'dark' | 'system'\n  let theme = $state<Theme>('system')\n\n  function applyTheme(next: Theme) {\n    theme = next\n    if (typeof document === 'undefined') return\n    const dark = next === 'dark' || (next === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)\n    document.documentElement.classList.toggle('dark', dark)\n    try {\n      window.localStorage.setItem('uipkge:theme', next)\n    } catch {\n      // Blocked storage: the choice holds for this page view only.\n    }\n  }\n\n  onMount(() => {\n    try {\n      const stored = window.localStorage.getItem('uipkge:theme') as Theme | null\n      if (stored === 'light' || stored === 'dark' || stored === 'system') applyTheme(stored)\n      else applyTheme('system')\n    } catch {\n      applyTheme('system')\n    }\n  })\n\n  function handleLogout() {\n    // TODO: call your /api/auth/logout endpoint, then redirect.\n    console.warn('NavUser: wire handleLogout() to your auth backend')\n  }\n</script>\n\n<SidebarMenu data-slot=\"sidebar-01\">\n  <SidebarMenuItem>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        {#snippet child({ props })}\n          <SidebarMenuButton\n            {...props}\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:!justify-center\"\n          >\n            <Avatar class=\"h-8 w-8 shrink-0 rounded-lg group-data-[collapsible=icon]:size-6\">\n              <AvatarFallback class=\"rounded-lg text-xs\">{user.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n              <span class=\"truncate font-medium\">{user.name}</span>\n              <span class=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n          </SidebarMenuButton>\n        {/snippet}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        class=\"min-w-56 rounded-lg\"\n        side={sidebar.isMobile ? 'bottom' : 'right'}\n        align=\"end\"\n        sideOffset={4}\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=\"h-8 w-8 rounded-lg\">\n              <AvatarFallback class=\"rounded-lg\">{user.initials}</AvatarFallback>\n            </Avatar>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">{user.name}</span>\n              <span class=\"truncate text-xs\">{user.email}</span>\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem><BadgeCheck class=\"size-4\" /> Profile</DropdownMenuItem>\n          <DropdownMenuItem><Settings class=\"size-4\" /> Settings</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <Palette class=\"size-4\" />\n            Theme\n            <span class=\"text-muted-foreground ml-auto text-xs capitalize\">{theme}</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent class=\"min-w-36\">\n            <DropdownMenuRadioGroup value={theme} onValueChange={(v) => applyTheme(v as Theme)}>\n              <DropdownMenuRadioItem value=\"light\"><Sun class=\"size-4\" /> Light</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"dark\"><Moon class=\"size-4\" /> Dark</DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"system\"><Monitor class=\"size-4\" /> System</DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem onSelect={handleLogout}>\n          <LogOut class=\"size-4\" />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </SidebarMenuItem>\n</SidebarMenu>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-01/NavUser.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-01/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page wired by `npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-01.json`.\n  // Visit /sidebar-01-demo after install to see the block without\n  // editing your own pages. Free to edit or delete me.\n  import Sidebar01 from '$lib/components/blocks/sidebar-01/Sidebar01.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar01 />\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-01 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-01-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": "Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.svelte to change routes and NavUser.svelte to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.",
  "categories": [
    "layout",
    "sidebar"
  ]
}