{
  "name": "sidebar-09",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "avatar",
    "breadcrumb",
    "dropdown-menu",
    "label",
    "separator",
    "sidebar",
    "switch"
  ],
  "files": [
    {
      "path": "blocks/sidebar-09/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-09/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"@lucide/vue\"\nimport { h, ref } from \"vue\"\nimport NavUser from \"../components/NavUser.vue\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nimport { Switch } from \"@/components/ui/switch\"\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  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nconst activeItem = ref(data.navMain[0]!)\nconst mails = ref(data.mails)\nconst { setOpen } = useSidebar()\n</script>\n\n<template>\n  <Sidebar\n    class=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n    v-bind=\"props\"\n  >\n    <!-- This is the first sidebar -->\n    <!-- We disable collapsible and adjust width to icon. -->\n    <!-- This will make the sidebar appear as icons. -->\n    <Sidebar\n      collapsible=\"none\"\n      class=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" as-child class=\"md:h-8 md:p-0\">\n              <a href=\"#\">\n                <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command class=\"size-4\" />\n                </div>\n                <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span class=\"truncate font-medium\">Acme Inc</span>\n                  <span class=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent class=\"px-1.5 md:px-0\">\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"item in data.navMain\" :key=\"item.title\">\n                <SidebarMenuButton\n                  :tooltip=\"h('div', { hidden: false }, item.title)\"\n                  :is-active=\"activeItem.title === item.title\"\n                  class=\"px-2.5 md:px-2\"\n                  @click=\"() => {\n                    activeItem = item\n\n                    const mail = data.mails.sort(() => Math.random() - 0.5)\n                    mails = mail.slice(0, Math.max(5, Math.floor(Math.random() * 10) + 1))\n                    setOpen(true)\n                  }\"\n                >\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.title }}</span>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser :user=\"data.user\" />\n      </SidebarFooter>\n    </Sidebar>\n\n    <!--  This is the second sidebar -->\n    <!--  We disable collapsible and let it fill remaining space -->\n    <Sidebar collapsible=\"none\" class=\"hidden flex-1 md:flex\">\n      <SidebarHeader class=\"gap-3.5 border-b p-4\">\n        <div class=\"flex w-full items-center justify-between\">\n          <div class=\"text-base font-medium text-foreground\">\n            {{ activeItem.title }}\n          </div>\n          <Label class=\"flex items-center gap-2 text-sm\">\n            <span>Unreads</span>\n            <Switch class=\"shadow-none\" />\n          </Label>\n        </div>\n        <SidebarInput placeholder=\"Type to search...\" />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup class=\"px-0\">\n          <SidebarGroupContent>\n            <a\n              v-for=\"mail in mails\"\n              :key=\"mail.email\"\n              href=\"#\"\n              class=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n            >\n              <div class=\"flex w-full items-center gap-2\">\n                <span>{{ mail.name }}</span>\n                <span class=\"ml-auto text-xs\">{{ mail.date }}</span>\n              </div>\n              <span class=\"font-medium\">{{ mail.subject }}</span>\n              <span class=\"line-clamp-2 w-[260px] whitespace-break-spaces text-xs\">\n                {{ mail.teaser }}\n              </span>\n            </a>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-09/components/NavUser.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-09/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 md:h-8 md:p-0\"\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=\"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-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-09/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-09/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = \"Collapsible nested sidebars.\"\nexport const iframeHeight = \"800px\"\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from \"./components/AppSidebar.vue\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\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    :style=\"{\n      '--sidebar-width': '350px',\n    }\"\n  >\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-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 class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                All Inboxes\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Inbox</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"index in 24\"\n          :key=\"index\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}