{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-07",
  "title": "Toolbar Action Sidebar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/sidebar-07/Sidebar07.svelte",
      "content": "<script lang=\"ts\">\n  // App sidebar with a bottom action bar. Workspace pill + search at the top,\n  // three grouped nav sections, user pill above an icon toolbar (Settings,\n  // Help, Notifications, Command palette, theme toggle, collapse) anchored at\n  // the very bottom. Every row is spelled out inline so you can edit in place.\n  import { onMount } from 'svelte'\n  import {\n    Bell,\n    ChartBar,\n    ChevronsUpDown,\n    Command,\n    CreditCard,\n    FileText,\n    HelpCircle,\n    LineChart,\n    Mail,\n    Moon,\n    Package,\n    Plus,\n    Search,\n    Settings as SettingsIcon,\n    ShoppingCart,\n    Sun,\n    Users,\n  } from '@lucide/svelte'\n  import { Avatar, AvatarFallback } from '$lib/components/ui/avatar'\n  import {\n    Sidebar,\n    SidebarContent,\n    SidebarFooter,\n    SidebarGroup,\n    SidebarGroupAction,\n    SidebarGroupContent,\n    SidebarGroupLabel,\n    SidebarHeader,\n    SidebarInput,\n    SidebarMenu,\n    SidebarMenuBadge,\n    SidebarMenuButton,\n    SidebarMenuItem,\n    SidebarRail,\n    SidebarSeparator,\n    SidebarTrigger,\n    useSidebar,\n  } from '$lib/components/ui/sidebar'\n\n  const sidebar = useSidebar()\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 `onMount`\n  // flips the flag and the derived re-runs against the real\n  // matchMedia signal.\n  let mounted = $state(false)\n  let dark = $state(false)\n  onMount(() => {\n    mounted = true\n    dark =\n      document.documentElement.classList.contains('dark') ||\n      window.matchMedia('(prefers-color-scheme: dark)').matches\n  })\n  const isDark = $derived(mounted && dark)\n\n  function toggleTheme() {\n    dark = !dark\n    document.documentElement.classList.toggle('dark', dark)\n  }\n</script>\n\n<Sidebar data-slot=\"sidebar-07\" 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-semibold\">uipkge</span>\n            <span class=\"text-muted-foreground truncate text-xs\">uipkge.dev</span>\n          </div>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n\n    <div class=\"px-1 pt-1 group-data-[collapsible=icon]:hidden\">\n      <div class=\"relative\">\n        <Search\n          class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n        <SidebarInput type=\"text\" placeholder=\"Search...\" class=\"pr-9 pl-8\" />\n        <kbd\n          class=\"bg-muted text-muted-foreground pointer-events-none absolute top-1/2 right-2 inline-flex h-5 -translate-y-1/2 items-center gap-0.5 rounded border px-1 font-mono text-xs font-medium select-none\"\n        >\n          <span>&#8984;</span>K\n        </kbd>\n      </div>\n    </div>\n  </SidebarHeader>\n\n  <SidebarContent>\n    <SidebarGroup>\n      <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <!-- Active row gets a subtle success-tinted gradient to mark it\n                 without competing with the rest of the nav. -->\n            <SidebarMenuButton\n              isActive\n              tooltip=\"Analytics\"\n              class=\"data-[active=true]:!bg-success/20 data-[active=true]:!text-foreground\"\n            >\n              <ChartBar class=\"size-4\" />\n              <span>Analytics</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Performance\">\n              <LineChart class=\"size-4\" />\n              <span>Performance</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Management</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Products\">\n              <Package class=\"size-4\" />\n              <span>Products</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Orders\">\n              <ShoppingCart class=\"size-4\" />\n              <span>Orders</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Subscribers\">\n              <Users class=\"size-4\" />\n              <span>Subscribers</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Transactions\">\n              <CreditCard class=\"size-4\" />\n              <span>Transactions</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n\n    <SidebarGroup>\n      <SidebarGroupLabel>Content</SidebarGroupLabel>\n      <SidebarGroupAction aria-label=\"Add content\">\n        <Plus class=\"size-4\" />\n      </SidebarGroupAction>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Posts\">\n              <FileText class=\"size-4\" />\n              <span>Posts</span>\n            </SidebarMenuButton>\n            <SidebarMenuBadge class=\"bg-destructive text-white\">10</SidebarMenuBadge>\n          </SidebarMenuItem>\n          <SidebarMenuItem>\n            <SidebarMenuButton tooltip=\"Pages\">\n              <Mail class=\"size-4\" />\n              <span>Pages</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </SidebarContent>\n\n  <SidebarFooter>\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <SidebarMenuButton size=\"lg\" class=\"group-data-[collapsible=icon]:!justify-center\">\n          <Avatar class=\"size-8 rounded-lg group-data-[collapsible=icon]:size-6\">\n            <AvatarFallback class=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs\"\n              >SW</AvatarFallback\n            >\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\">Sarah Wilson</span>\n            <span class=\"text-muted-foreground truncate text-xs\">Admin Account</span>\n          </div>\n          <ChevronsUpDown class=\"ml-auto size-4 group-data-[collapsible=icon]:hidden\" />\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n\n    {#if sidebar.state === 'expanded'}\n      <SidebarSeparator class=\"my-1\" />\n\n      <!-- Action toolbar -- evenly spaced quick icons. Last button is the\n           SidebarTrigger collapse toggle. Replace others with\n           <a> / <button onclick=\"...\"> as needed. -->\n      <div class=\"flex items-center justify-between px-1 pb-1\">\n        <button\n          type=\"button\"\n          aria-label=\"Settings\"\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n        >\n          <SettingsIcon class=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Help\"\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n        >\n          <HelpCircle class=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Notifications\"\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n        >\n          <Bell class=\"size-4\" />\n        </button>\n        <button\n          type=\"button\"\n          aria-label=\"Command palette\"\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md transition-colors\"\n        >\n          <Command class=\"size-4\" />\n        </button>\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 hover:text-foreground flex aspect-square size-8 items-center justify-center rounded-md 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        <SidebarTrigger\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md\"\n        />\n      </div>\n\n      <!-- Collapsed-state: surface the trigger on its own so the rail always\n           has an expand affordance. -->\n    {:else}\n      <div class=\"flex items-center justify-center pb-1\">\n        <SidebarTrigger\n          class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md\"\n        />\n      </div>\n    {/if}\n  </SidebarFooter>\n\n  <SidebarRail />\n</Sidebar>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/sidebar-07/Sidebar07.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/sidebar-07/page.svelte",
      "content": "<script lang=\"ts\">\n  // Demo page wired by `npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/sidebar-07.json`.\n  // Visit /sidebar-07-demo after install to see the block without\n  // editing your own pages. Free to edit or delete me.\n  import Sidebar07 from '$lib/components/blocks/sidebar-07/Sidebar07.svelte'\n  import { SidebarInset, SidebarProvider, SidebarTrigger } from '$lib/components/ui/sidebar'\n</script>\n\n<SidebarProvider>\n  <Sidebar07 />\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-07 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-07-demo/+page.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/sidebar.json",
    "https://uipkge.dev/r/svelte/avatar.json"
  ],
  "description": "App sidebar with a bottom action bar -- workspace pill, ⌘K search, grouped nav with section labels (Dashboard / Management / Content), badge counts, user pill above an icon toolbar (Settings, Help, Notifications, Command, theme toggle, collapse). Built on sidebar-01.",
  "categories": [
    "layout",
    "sidebar"
  ]
}