{
  "name": "Sidebar07",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "AppSidebar.vue",
    "breadcrumb",
    "separator",
    "sidebar",
    "NavMain.vue",
    "NavProjects.vue",
    "NavUser.vue",
    "TeamSwitcher.vue",
    "collapsible",
    "dropdown-menu",
    "avatar"
  ],
  "files": [
    {
      "path": "block/Sidebar07/page.vue",
      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
      "type": "registry:page",
      "target": "pages/dashboard/index.vue"
    },
    {
      "path": "block/Sidebar07/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n  AudioWaveform,\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  GalleryVerticalEnd,\n  Map,\n  PieChart,\n  Settings2,\n  SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\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  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 v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n      <NavProjects :projects=\"data.projects\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <NavUser :user=\"data.user\" />\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar07/components/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\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    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Platform</SidebarGroupLabel>\n    <SidebarMenu>\n      <Collapsible\n        v-for=\"item in items\"\n        :key=\"item.title\"\n        as-child\n        :default-open=\"item.isActive\"\n        class=\"group/collapsible\"\n      >\n        <SidebarMenuItem>\n          <CollapsibleTrigger as-child>\n            <SidebarMenuButton :tooltip=\"item.title\">\n              <component :is=\"item.icon\" v-if=\"item.icon\" />\n              <span>{{ item.title }}</span>\n              <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n            </SidebarMenuButton>\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <SidebarMenuSub>\n              <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuSubButton as-child>\n                  <a :href=\"subItem.url\">\n                    <span>{{ subItem.title }}</span>\n                  </a>\n                </SidebarMenuSubButton>\n              </SidebarMenuSubItem>\n            </SidebarMenuSub>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      </Collapsible>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar07/components/NavProjects.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  Folder,\n  Forward,\n  type LucideIcon,\n  MoreHorizontal,\n  Trash2,\n} from 'lucide-vue-next'\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  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\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 class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar07/components/NavUser.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}>()\n\nconst { isMobile } = useSidebar()\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\"\n          >\n            <Avatar class=\"h-8 w-8 rounded-lg\">\n              <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n              <AvatarFallback class=\"rounded-lg\">\n                CN\n              </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            <ChevronsUpDown class=\"ml-auto size-4\" />\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                <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n                <AvatarFallback class=\"rounded-lg\">\n                  CN\n                </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          <DropdownMenuItem>\n            <LogOut />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar07/components/TeamSwitcher.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\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\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-4\" />\n            </div>\n            <div class=\"grid flex-1 text-left text-sm leading-tight\">\n              <span class=\"truncate font-semibold\">\n                {{ activeTeam.name }}\n              </span>\n              <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n          align=\"start\"\n          :side=\"isMobile ? 'bottom' : 'right'\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n          <DropdownMenuItem\n            v-for=\"(team, index) in teams\"\n            :key=\"team.name\"\n            class=\"gap-2 p-2\"\n            @click=\"activeTeam = team\"\n          >\n            <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"gap-2 p-2\">\n            <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n              <Plus class=\"size-4\" />\n            </div>\n            <div class=\"font-medium text-muted-foreground\">\n              Add team\n            </div>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:component",
      "target": ""
    }
  ]
}