{
  "name": "Sidebar10",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "AppSidebar.vue",
    "NavActions.vue",
    "breadcrumb",
    "separator",
    "sidebar",
    "NavFavorites.vue",
    "NavMain.vue",
    "NavSecondary.vue",
    "NavWorkspaces.vue",
    "TeamSwitcher.vue",
    "button",
    "popover",
    "dropdown-menu",
    "collapsible"
  ],
  "files": [
    {
      "path": "block/Sidebar10/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\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-14 shrink-0 items-center gap-2\">\n        <div class=\"flex flex-1 items-center gap-2 px-3\">\n          <SidebarTrigger />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\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        <div class=\"ml-auto px-3\">\n          <NavActions />\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n        <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n        <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
      "type": "registry:page",
      "target": "pages/dashboard/index.vue"
    },
    {
      "path": "block/Sidebar10/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\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-next'\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",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/components/NavActions.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n  [\n    {\n      label: 'Customize Page',\n      icon: Settings2,\n    },\n    {\n      label: 'Turn into wiki',\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: 'Copy Link',\n      icon: Link,\n    },\n    {\n      label: 'Duplicate',\n      icon: Copy,\n    },\n    {\n      label: 'Move to',\n      icon: CornerUpRight,\n    },\n    {\n      label: 'Move to Trash',\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: 'Undo',\n      icon: CornerUpLeft,\n    },\n    {\n      label: 'View analytics',\n      icon: LineChart,\n    },\n    {\n      label: 'Version History',\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: 'Show delete pages',\n      icon: Trash,\n    },\n    {\n      label: 'Notifications',\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: 'Import',\n      icon: ArrowUp,\n    },\n    {\n      label: 'Export',\n      icon: ArrowDown,\n    },\n  ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <div class=\"flex items-center gap-2 text-sm\">\n    <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n      Edit Oct 08\n    </div>\n    <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n      <Star />\n    </Button>\n    <Popover v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"h-7 w-7 data-[state=open]:bg-accent\"\n        >\n          <MoreHorizontal />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        class=\"w-56 overflow-hidden rounded-lg p-0\"\n        align=\"end\"\n      >\n        <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n          <SidebarContent>\n            <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n              <SidebarGroupContent class=\"gap-0\">\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n                    <SidebarMenuButton>\n                      <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/components/NavFavorites.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  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from 'lucide-vue-next'\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",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/components/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/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",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/components/NavSecondary.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/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",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/components/NavWorkspaces.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\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",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar10/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'\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, 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 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          <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": ""
    }
  ]
}