{
  "name": "sidebar-15",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "avatar",
    "breadcrumb",
    "calendar",
    "collapsible",
    "dropdown-menu",
    "separator",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-15/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type {\n  SidebarProps,\n} from \"@/components/ui/sidebar\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Building Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\" class=\"font-medium\">\n                  {{ item.title }}\n                </a>\n              </SidebarMenuButton>\n              <SidebarMenuSub v-if=\"item.items.length\">\n                <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                  <SidebarMenuSubButton\n                    as-child\n                    :is-active=\"subItem.isActive\"\n                  >\n                    <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/Calendars.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/Calendars.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, ChevronRight } from \"@lucide/vue\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<{\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}>()\n</script>\n\n<template>\n  <template v-for=\"(calendar, index) in calendars\" :key=\"calendar.name\">\n    <SidebarGroup class=\"py-0\">\n      <Collapsible\n        :default-open=\"index === 0\"\n        class=\"group/collapsible\"\n      >\n        <SidebarGroupLabel\n          as-child\n          class=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n        >\n          <CollapsibleTrigger>\n            {{ calendar.name }}\n            <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n          </CollapsibleTrigger>\n        </SidebarGroupLabel>\n        <CollapsibleContent>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"(item, index) in calendar.items\" :key=\"item\">\n                <SidebarMenuButton>\n                  <div\n                    :data-active=\"index < 2\"\n                    class=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                  >\n                    <Check class=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                  </div>\n                  {{ item }}\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </CollapsibleContent>\n      </Collapsible>\n    </SidebarGroup>\n    <SidebarSeparator class=\"mx-0\" />\n  </template>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/DatePicker.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/DatePicker.vue",
      "content": "<script setup lang=\"ts\">\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <SidebarGroup class=\"px-0\">\n    <SidebarGroupContent>\n      <Calendar class=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/NavFavorites.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/NavFavorites.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"@lucide/vue\"\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  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n  <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n    <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n    <SidebarMenu>\n      <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n        <SidebarMenuButton as-child>\n          <a :href=\"item.url\" :title=\"item.name\">\n            <span>{{ item.emoji }}</span>\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-56 rounded-lg\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n          >\n            <DropdownMenuItem>\n              <StarOff class=\"text-muted-foreground\" />\n              <span>Remove from Favorites</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Link class=\"text-muted-foreground\" />\n              <span>Copy Link</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ArrowUpRight class=\"text-muted-foreground\" />\n              <span>Open in New Tab</span>\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <Trash2 class=\"text-muted-foreground\" />\n              <span>Delete</span>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n\n      <SidebarMenuItem>\n        <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n          <MoreHorizontal />\n          <span>More</span>\n        </SidebarMenuButton>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/NavMain.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from \"@lucide/vue\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n      <SidebarMenuButton as-child :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</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/NavSecondary.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/NavSecondary.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from \"@lucide/vue\"\n\nimport type { Component } from \"vue\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\ndefineProps<{\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: Component\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>\n            <a :href=\"item.url\">\n              <component :is=\"item.icon\" />\n              <span>{{ item.title }}</span>\n            </a>\n          </SidebarMenuButton>\n          <SidebarMenuBadge v-if=\"item.badge\">\n            <component :is=\"item.badge\" />\n          </SidebarMenuBadge>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/NavUser.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/NavUser.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"@lucide/vue\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\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-medium\">{{ 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=\"start\"\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-medium\">{{ 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"
    },
    {
      "path": "blocks/sidebar-15/components/NavWorkspaces.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/NavWorkspaces.vue",
      "content": "<script setup lang=\"ts\">\nimport { ChevronRight, MoreHorizontal, Plus } from \"@lucide/vue\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\"\n\ndefineProps<{\n  workspaces: {\n    name: string\n    emoji: string\n    pages: {\n      name: string\n      emoji: string\n    }[]\n  }[]\n}>()\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n    <SidebarGroupContent>\n      <SidebarMenu>\n        <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n          <SidebarMenuItem>\n            <SidebarMenuButton as-child>\n              <a href=\"#\">\n                <span>{{ workspace.emoji }}</span>\n                <span>{{ workspace.name }}</span>\n              </a>\n            </SidebarMenuButton>\n            <CollapsibleTrigger as-child>\n              <SidebarMenuAction\n                class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                show-on-hover\n              >\n                <ChevronRight />\n              </SidebarMenuAction>\n            </CollapsibleTrigger>\n            <SidebarMenuAction show-on-hover>\n              <Plus />\n            </SidebarMenuAction>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n                  <SidebarMenuSubButton as-child>\n                    <a href=\"#\">\n                      <span>{{ page.emoji }}</span>\n                      <span>{{ page.name }}</span>\n                    </a>\n                  </SidebarMenuSubButton>\n                </SidebarMenuSubItem>\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </SidebarMenuItem>\n        </Collapsible>\n\n        <SidebarMenuItem>\n          <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroupContent>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/SidebarLeft.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/SidebarLeft.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\n\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"@lucide/vue\"\n\nimport NavFavorites from \"../components/NavFavorites.vue\"\nimport NavMain from \"../components/NavMain.vue\"\nimport NavSecondary from \"../components/NavSecondary.vue\"\nimport NavWorkspaces from \"../components/NavWorkspaces.vue\"\nimport TeamSwitcher from \"../components/TeamSwitcher.vue\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\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: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar class=\"border-r-0\" v-bind=\"props\">\n    <SidebarHeader>\n      <TeamSwitcher :teams=\"data.teams\" />\n      <NavMain :items=\"data.navMain\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <NavFavorites :favorites=\"data.favorites\" />\n      <NavWorkspaces :workspaces=\"data.workspaces\" />\n      <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/SidebarRight.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/SidebarRight.vue",
      "content": "<script setup lang=\"ts\">\nimport { Plus } from \"@lucide/vue\"\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\n\nimport Calendars from \"../components/Calendars.vue\"\nimport DatePicker from \"../components/DatePicker.vue\"\nimport NavUser from \"../components/NavUser.vue\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: \"none\",\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  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar\n    class=\"sticky hidden lg:flex top-0 h-svh border-l\"\n    v-bind=\"props\"\n  >\n    <SidebarHeader class=\"h-16 border-b border-sidebar-border\">\n      <NavUser :user=\"data.user\" />\n    </SidebarHeader>\n    <SidebarContent>\n      <DatePicker />\n      <SidebarSeparator class=\"mx-0\" />\n      <Calendars :calendars=\"data.calendars\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <Plus />\n            <span>New Calendar</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarFooter>\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-15/components/TeamSwitcher.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/components/TeamSwitcher.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from \"vue\"\n\nimport { ChevronDown, Plus } from \"@lucide/vue\"\nimport { ref } from \"vue\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<{\n  teams: {\n    name: string\n    logo: Component\n    plan: string\n  }[]\n}>()\n\nconst activeTeam = ref(props.teams[0]!)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton class=\"w-fit px-1.5\">\n            <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              <component :is=\"activeTeam.logo\" class=\"size-3\" />\n            </div>\n            <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n            <ChevronDown class=\"opacity-50\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-64 rounded-lg\"\n          align=\"start\"\n          side=\"bottom\"\n          :side-offset=\"4\"\n        >\n          <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n            Teams\n          </DropdownMenuLabel>\n\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-xs border\">\n              <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n            </div>\n            {{ team.name }}\n            <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n          </DropdownMenuItem>\n\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"
    },
    {
      "path": "blocks/sidebar-15/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-15/page.vue",
      "content": "<script lang=\"ts\">\nexport const iframeHeight = \"800px\"\nexport const description = \"A left and right sidebar.\"\n</script>\n\n<script setup lang=\"ts\">\nimport SidebarLeft from \"./components/SidebarLeft.vue\"\nimport SidebarRight from \"./components/SidebarRight.vue\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <SidebarProvider>\n    <SidebarLeft />\n    <SidebarInset>\n      <header class=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator\n            orientation=\"vertical\"\n            class=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage class=\"line-clamp-1\">\n                  Project Management & Task Tracking\n                </BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n    <SidebarRight />\n  </SidebarProvider>\n</template>\n"
    }
  ]
}