{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-02",
  "title": "Sidebar 02",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-02/Sidebar02.vue",
      "content": "<script setup lang=\"ts\">\nimport { BookOpen, Bot, Frame, LifeBuoy, Map, PieChart, Send, Settings2, SquareTerminal } from 'lucide-vue-next'\n\nimport NavMain from './NavMain.vue'\nimport NavProjects from './NavProjects.vue'\nimport NavSecondary from './NavSecondary.vue'\nimport NavUser from './NavUser.vue'\nimport TeamSwitcher from './TeamSwitcher.vue'\nimport { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from '@/components/ui/sidebar'\n\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n  },\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: 'Support',\n      url: '#',\n      icon: LifeBuoy,\n    },\n    {\n      title: 'Feedback',\n      url: '#',\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar collapsible=\"icon\">\n    <SidebarHeader>\n      <TeamSwitcher />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/Sidebar02.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-02/TeamSwitcher.vue",
      "content": "<script setup lang=\"ts\">\n// Edit teams + activeTeam below to match your tenant model. The dropdown\n// is the full team switcher pattern -- avatar tile, label, kbd shortcut,\n// and a \"Add team\" footer row. Wire setActive() to your tenant API.\nimport { h, ref } from 'vue'\nimport { AudioWaveform, Check, ChevronsUpDown, Command, Plus } from 'lucide-vue-next'\n\n// 4-quadrant uipkge logo. Inline functional component so it can sit\n// next to Lucide icons in the teams array without an extra file.\nconst UipkgeMark = (props: { class?: string }) =>\n  h('svg', { viewBox: '0 0 24 24', class: props.class, fill: 'currentColor', 'aria-hidden': 'true' }, [\n    h('rect', { x: 2, y: 2, width: 9, height: 9, rx: 1.5 }),\n    h('rect', { x: 13, y: 2, width: 9, height: 9, rx: 1.5, opacity: 0.55 }),\n    h('rect', { x: 2, y: 13, width: 9, height: 9, rx: 1.5, opacity: 0.55 }),\n    h('rect', { x: 13, y: 13, width: 9, height: 9, rx: 1.5 }),\n  ])\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar'\n\nconst teams = [\n  { name: 'uipkge', logo: UipkgeMark, plan: 'UI registry' },\n  { name: 'uipkge HRMS', logo: AudioWaveform, plan: 'Vertical' },\n  { name: 'uipkge Hospital', logo: Command, plan: 'Vertical' },\n]\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(teams[0]!)\nfunction setActive(team: (typeof teams)[number]) {\n  activeTeam.value = team\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            <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              <component :is=\"activeTeam.logo\" class=\"size-4 group-data-[collapsible=icon]:size-3.5\" />\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\">{{ activeTeam.name }}</span>\n              <span class=\"text-muted-foreground truncate text-xs\">{{ activeTeam.plan }}</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=\"start\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-muted-foreground text-xs\">Teams</DropdownMenuLabel>\n          <DropdownMenuItem v-for=\"(team, i) in teams\" :key=\"team.name\" class=\"gap-2 p-2\" @select=\"setActive(team)\">\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-3.5 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <Check v-if=\"activeTeam === team\" class=\"ml-auto size-4\" />\n            <DropdownMenuShortcut v-else>⌘{{ i + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"text-muted-foreground font-medium\">Add team</div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/TeamSwitcher.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-02/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/components/ui/sidebar'\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n      isActive?: boolean\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible v-for=\"item in items\" :key=\"item.title\" as-child :default-open=\"item.isActive\">\n        <SidebarMenuItem>\n          <SidebarMenuButton as-child :tooltip=\"item.title\" :is-active=\"item.isActive\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <template v-if=\"item.items?.length\">\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction class=\"data-[state=open]:rotate-90\">\n                <ChevronRight />\n                <span class=\"sr-only\">Toggle</span>\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton as-child :is-active=\"subItem.isActive\">\n                    <a :href=\"subItem.url\">\n                      <span>{{ subItem.title }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </template>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/NavMain.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-02/NavProjects.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\nimport { Folder, Forward, MoreHorizontal, Trash2 } from 'lucide-vue-next'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/components/ui/sidebar'\n\ndefineProps<{\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <!-- Upstream shadcn-vue hides this entire group on icon-mode collapse\n       with `group-data-[collapsible=icon]:hidden`. We keep it visible so\n       the project icons stay reachable in the narrow column; the\n       SidebarGroupLabel below and the `<span>` children of each\n       SidebarMenuButton already self-hide on collapse, leaving an\n       icon-only column that lines up with NavMain. -->\n  <SidebarGroup>\n    <SidebarGroupLabel>Projects</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\">\n            <component :is=\"item.icon\" />\n            <span>{{ item.name }}</span>\n          </a>\n        </SidebarMenuButton>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuAction show-on-hover>\n              <MoreHorizontal />\n              <span class=\"sr-only\">More</span>\n            </SidebarMenuAction>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            class=\"w-48 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <Folder class=\"text-muted-foreground\" />\n              <span>View Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Forward class=\"text-muted-foreground\" />\n              <span>Share Project</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete Project</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n      <SidebarMenuItem>\n        <SidebarMenuButton>\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/NavProjects.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-02/NavSecondary.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/components/ui/sidebar'\n\nconst props = defineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n          <SidebarMenuButton as-child size=\"sm\" :is-active=\"item.isActive\">\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/NavSecondary.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-02/NavUser.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Monitor,\n  Moon,\n  Palette,\n  Sparkles,\n  Sun,\n} from 'lucide-vue-next'\nimport { useTheme } from '~/composables/useTheme'\n\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 props = defineProps<{\n  user: {\n    name: string\n    email: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\nconst { theme, setTheme } = useTheme()\n\nconst initials = computed(() => {\n  const parts = props.user.name.trim().split(/\\s+/).slice(0, 2)\n  return parts.map((p) => p[0]?.toUpperCase()).join('') || 'U'\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                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 text-xs\">{{ 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>\n              <Sparkles />\n              Upgrade to Pro\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <BadgeCheck />\n              Account\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CreditCard />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <Bell />\n              Notifications\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Palette />\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 /> Light </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"dark\"> <Moon /> Dark </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"system\"> <Monitor /> System </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-02/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/collapsible.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/use-theme.json"
  ],
  "description": "Full-featured app sidebar -- collapsible=\"icon\" rail with TeamSwitcher header, primary nav, projects section, secondary nav, and user dropdown footer. Each section ships as a sibling file in the same folder so consumers can edit one piece at a time.",
  "categories": [
    "sidebar",
    "layout"
  ]
}