{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-07",
  "title": "Sidebar 07",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-07/Sidebar07.vue",
      "content": "<script setup 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, Log out) anchored at the very\n// bottom. Every row is spelled out inline so you can edit in place.\n\nimport { computed, ref, onMounted } from 'vue'\nimport { useTheme } from '~/composables/useTheme'\nimport {\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-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\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 '@/components/ui/sidebar'\n\nconst { state } = 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. Mirrors the sidebar-05 pattern.\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</script>\n\n<template>\n  <Sidebar 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        <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>K\n            </kbd>\n          </template>\n        </SidebarInput>\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                is-active\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\n                class=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs group-data-[collapsible=icon]:text-[10px]\"\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      <template v-if=\"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             <NuxtLink> / <button @click=\"...\"> 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            @click=\"setTheme(isDark ? 'light' : 'dark')\"\n          >\n            <Sun v-if=\"isDark\" class=\"size-4\" />\n            <Moon v-else class=\"size-4\" />\n          </button>\n          <SidebarTrigger\n            class=\"text-muted-foreground hover:bg-sidebar-accent hover:text-foreground size-8 rounded-md\"\n          />\n        </div>\n      </template>\n\n      <!-- Collapsed-state: surface the trigger on its own so the rail always\n           has an expand affordance. -->\n      <template v-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      </template>\n    </SidebarFooter>\n\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Sidebar07.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/use-theme.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, Log out). Built on sidebar-01.",
  "categories": [
    "sidebar",
    "layout"
  ]
}