{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-01",
  "title": "Sidebar 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-01/Sidebar01.vue",
      "content": "<script setup 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\nimport { BarChart3, BookOpen, FileText, Files, History, LayoutDashboard, Table as TableIcon } from 'lucide-vue-next'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from '@/components/ui/sidebar'\nimport NavUser from './NavUser.vue'\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-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 NuxtLink / RouterLink and bind :is-active to your route -->\n              <SidebarMenuButton is-active 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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-01/Sidebar01.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-01/NavUser.vue",
      "content": "<script setup 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\nimport { BadgeCheck, ChevronsUpDown, LogOut, Monitor, Moon, Palette, Settings, Sun } from 'lucide-vue-next'\nimport { useTheme } from '~/composables/useTheme'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\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 '@/components/ui/dropdown-menu'\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'\n\nconst { isMobile } = useSidebar()\nconst { theme, setTheme } = useTheme()\n\n// Replace these with your auth session.\nconst user = {\n  name: 'Test User',\n  email: 'you@example.com',\n  initials: 'TU',\n}\n\nfunction 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<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\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 group-data-[collapsible=icon]:text-[10px]\">{{\n                user.initials\n              }}</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        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          align=\"end\"\n          :side-offset=\"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\n                :model-value=\"theme\"\n                @update:model-value=\"(v) => setTheme(v as 'light' | 'dark' | 'system')\"\n              >\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 @click=\"handleLogout\">\n            <LogOut class=\"size-4\" />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-01/NavUser.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": "Collapsible icon-rail app sidebar with brand block, two grouped nav sections, and a user dropdown footer. Pure template, no props -- edit Sidebar01.vue to change routes and NavUser.vue to wire your auth session. Pair with SidebarProvider + SidebarInset for the full admin shell.",
  "categories": [
    "sidebar",
    "layout"
  ]
}