{
  "name": "sidebar-12",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "avatar",
    "breadcrumb",
    "calendar",
    "collapsible",
    "dropdown-menu",
    "separator",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-12/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-12/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\nimport { Plus } from \"@lucide/vue\"\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  SidebarRail,\n  SidebarSeparator,\n} from \"@/components/ui/sidebar\"\n\nconst props = defineProps<SidebarProps>()\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 v-bind=\"props\">\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    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-12/components/Calendars.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-12/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 border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\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-12/components/DatePicker.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-12/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-12/components/NavUser.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-12/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-12/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-12/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = \"A sidebar with a calendar.\"\nexport const iframeHeight = \"800px\"\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from \"./components/AppSidebar.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    <AppSidebar />\n    <SidebarInset>\n      <header class=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator\n          orientation=\"vertical\"\n          class=\"mr-2 data-[orientation=vertical]:h-4\"\n        />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbPage>October 2024</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n          <div v-for=\"i in 20\" :key=\"i\" class=\"aspect-square rounded-xl bg-muted/50\" />\n        </div>\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}