{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-06",
  "title": "Sidebar 06",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-06/Sidebar06.vue",
      "content": "<script setup lang=\"ts\">\n// Colorful, customised HRMS-style sidebar -- branded project tiles, badges,\n// status dots, and a user pill footer. Every row is spelled out inline so\n// you can swap colors and labels in place.\n\nimport {\n  Briefcase,\n  Calendar,\n  ChartLine,\n  ChevronsUpDown,\n  ClipboardList,\n  Folder,\n  GraduationCap,\n  HeartPulse,\n  HelpCircle,\n  Inbox,\n  LayoutDashboard,\n  Monitor,\n  Moon,\n  Palette,\n  Search,\n  Send,\n  Settings as SettingsIcon,\n  Star,\n  Sun,\n  Users,\n} from 'lucide-vue-next'\nimport { useTheme } from '~/composables/useTheme'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\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 {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n  useSidebar,\n} from '@/components/ui/sidebar'\n\nconst { isMobile } = useSidebar()\nconst { theme, setTheme } = useTheme()\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 shadow-sm 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\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>F\n            </kbd>\n          </template>\n        </SidebarInput>\n      </div>\n    </SidebarHeader>\n\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton is-active tooltip=\"Dashboard\">\n                <LayoutDashboard class=\"size-4\" />\n                <span>Dashboard</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Employees\">\n                <Users class=\"size-4\" />\n                <span>Employees</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Clients\">\n                <Briefcase class=\"size-4\" />\n                <span>Clients</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Projects\">\n                <Folder class=\"size-4\" />\n                <span>Projects</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n\n      <SidebarSeparator />\n\n      <SidebarGroup>\n        <SidebarGroupLabel>Workforce</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Calendar\">\n                <Calendar class=\"size-4\" />\n                <span>Calendar</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Attendance\">\n                <ClipboardList class=\"size-4\" />\n                <span>Attendance</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Inbox\">\n                <Inbox class=\"size-4\" />\n                <span>Inbox</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge class=\"bg-destructive text-white\">6</SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Analytics\">\n                <ChartLine class=\"size-4\" />\n                <span>Analytics</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n\n      <SidebarSeparator />\n\n      <SidebarGroup>\n        <SidebarGroupLabel>Projects</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Shift Planner\">\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              </SidebarMenuButton>\n              <SidebarMenuBadge class=\"text-warning\">\n                <Star class=\"size-3.5 fill-current\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Training Portal\">\n                <div\n                  class=\"bg-chart-2 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                >\n                  <GraduationCap class=\"size-3\" />\n                </div>\n                <span>Training Portal</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge class=\"text-warning\">\n                <Star class=\"size-3.5 fill-current\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Performance Hub\">\n                <div\n                  class=\"bg-chart-3 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                >\n                  <HeartPulse class=\"size-3\" />\n                </div>\n                <span>Performance Hub</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge class=\"text-warning\">\n                <Star class=\"size-3.5 fill-current\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Expense Claims\">\n                <div\n                  class=\"bg-chart-4 flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white\"\n                >\n                  <ChartLine class=\"size-3\" />\n                </div>\n                <span>Expense Claims</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge class=\"text-warning\">\n                <Star class=\"size-3.5 fill-current\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n\n      <SidebarSeparator />\n\n      <SidebarGroup>\n        <SidebarGroupLabel>My team</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Olivia Bennett\">\n                <Avatar class=\"size-5\">\n                  <AvatarFallback class=\"bg-chart-1/15 text-foreground text-[10px]\">OB</AvatarFallback>\n                </Avatar>\n                <span>Olivia Bennett</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge>\n                <span class=\"bg-destructive size-1.5 rounded-full\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Daniel Morgan\">\n                <Avatar class=\"size-5\">\n                  <AvatarFallback class=\"bg-chart-2/15 text-foreground text-[10px]\">DM</AvatarFallback>\n                </Avatar>\n                <span>Daniel Morgan</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge>\n                <span class=\"bg-warning size-1.5 rounded-full\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Ethan Reynolds\">\n                <Avatar class=\"size-5\">\n                  <AvatarFallback class=\"bg-chart-3/15 text-foreground text-[10px]\">ER</AvatarFallback>\n                </Avatar>\n                <span>Ethan Reynolds</span>\n              </SidebarMenuButton>\n              <SidebarMenuBadge>\n                <span class=\"bg-success size-1.5 rounded-full\" />\n              </SidebarMenuBadge>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n\n      <SidebarSeparator />\n\n      <SidebarGroup>\n        <SidebarGroupLabel>Administration</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Settings\">\n                <SettingsIcon class=\"size-4\" />\n                <span>Settings</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton tooltip=\"Help center\">\n                <HelpCircle class=\"size-4\" />\n                <span>Help center</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n\n    <SidebarFooter>\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                <div class=\"relative shrink-0\">\n                  <Avatar class=\"h-8 w-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                      >JC</AvatarFallback\n                    >\n                  </Avatar>\n                  <span\n                    class=\"bg-destructive ring-sidebar absolute -right-0.5 -bottom-0.5 size-2.5 rounded-full ring-2\"\n                  />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden\">\n                  <span class=\"truncate font-medium\">James Carter</span>\n                  <span class=\"text-muted-foreground truncate text-xs\">Admin</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>James Carter</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem> <Send class=\"size-4\" /> Invite teammates </DropdownMenuItem>\n              <DropdownMenuItem> <SettingsIcon class=\"size-4\" /> Workspace settings </DropdownMenuItem>\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            </DropdownMenuContent>\n          </DropdownMenu>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Sidebar06.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": "Colorful, customised app sidebar -- branded project tiles with star favorites, badge counts, team avatars with status dots, and a user pill footer. Inline search input with ⌘F shortcut. Modeled on a HRMS workspace shell.",
  "categories": [
    "sidebar",
    "layout"
  ]
}