{
  "name": "sidebar-06",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue",
    "@vueuse/core"
  ],
  "registryDependencies": [
    "breadcrumb",
    "button",
    "card",
    "dropdown-menu",
    "separator",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-06/components/AppSidebar.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-06/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from \"@/components/ui/sidebar\"\nimport { GalleryVerticalEnd } from \"@lucide/vue\"\nimport NavMain from \"../components/NavMain.vue\"\nimport SidebarOptInForm from \"../components/SidebarOptInForm.vue\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\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}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <SidebarMenu>\n        <SidebarMenuItem>\n          <SidebarMenuButton size=\"lg\" as-child>\n            <a href=\"#\">\n              <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd class=\"size-4\" />\n              </div>\n              <div class=\"flex flex-col gap-0.5 leading-none\">\n                <span class=\"font-medium\">Documentation</span>\n                <span class=\"\">v1.0.0</span>\n              </div>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarHeader>\n    <SidebarContent>\n      <NavMain :items=\"data.navMain\" />\n    </SidebarContent>\n    <SidebarFooter>\n      <div class=\"p-1\">\n        <SidebarOptInForm />\n      </div>\n    </SidebarFooter>\n    <SidebarRail />\n  </Sidebar>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-06/components/NavMain.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-06/components/NavMain.vue",
      "content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from \"@lucide/vue\"\n\nimport { MoreHorizontal } from \"@lucide/vue\"\nimport { useMediaQuery } from \"@vueuse/core\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\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    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}>()\n\nconst isMobile = useMediaQuery(\"(max-width: 768px)\")\n</script>\n\n<template>\n  <SidebarGroup>\n    <SidebarMenu>\n      <DropdownMenu v-for=\"item in items\" :key=\"item.title\">\n        <SidebarMenuItem>\n          <DropdownMenuTrigger as-child>\n            <SidebarMenuButton class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n              {{ item.title }} <MoreHorizontal class=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            v-if=\"item.items?.length\"\n            :side=\"isMobile ? 'bottom' : 'right'\"\n            :align=\"isMobile ? 'end' : 'start'\"\n            class=\"min-w-56 rounded-lg\"\n          >\n            <DropdownMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\" as-child>\n              <a :href=\"childItem.url\">{{ childItem.title }}</a>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </SidebarMenuItem>\n      </DropdownMenu>\n    </SidebarMenu>\n  </SidebarGroup>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-06/components/SidebarOptInForm.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-06/components/SidebarOptInForm.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { SidebarInput } from \"@/components/ui/sidebar\"\n</script>\n\n<template>\n  <Card class=\"gap-2 py-4 shadow-none\">\n    <CardHeader class=\"px-4\">\n      <CardTitle class=\"text-sm\">\n        Subscribe to our newsletter\n      </CardTitle>\n      <CardDescription>\n        Opt-in to receive updates and news about the sidebar.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"px-4\">\n      <form>\n        <div class=\"grid gap-2.5\">\n          <SidebarInput type=\"email\" placeholder=\"Email\" />\n          <Button\n            class=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n            size=\"sm\"\n          >\n            Subscribe\n          </Button>\n        </div>\n      </form>\n    </CardContent>\n  </Card>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-06/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-06/page.vue",
      "content": "<script lang=\"ts\">\nexport const iframeHeight = \"800px\"\nexport const description = \"A sidebar with submenus as dropdowns.\"\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    <AppSidebar />\n    <SidebarInset>\n      <header class=\"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 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      </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-3\">\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n          <div class=\"bg-muted/50 aspect-video rounded-xl\" />\n        </div>\n        <div class=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n"
    }
  ]
}