{
  "name": "sidebar-13",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "breadcrumb",
    "button",
    "dialog",
    "sidebar"
  ],
  "files": [
    {
      "path": "blocks/sidebar-13/components/SettingsDialog.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-13/components/SettingsDialog.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"@lucide/vue\"\n\nimport { ref } from \"vue\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nconst open = ref(true)\n</script>\n\n<template>\n  <Dialog v-model:open=\"open\">\n    <DialogTrigger as-child>\n      <Button size=\"sm\">\n        Open Dialog\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n      <DialogTitle class=\"sr-only\">\n        Settings\n      </DialogTitle>\n      <DialogDescription class=\"sr-only\">\n        Customize your settings here.\n      </DialogDescription>\n      <SidebarProvider class=\"items-start\">\n        <Sidebar collapsible=\"none\" class=\"hidden md:flex\">\n          <SidebarContent>\n            <SidebarGroup>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  <SidebarMenuItem v-for=\"item in data.nav\" :key=\"item.name\">\n                    <SidebarMenuButton\n                      as-child\n                      :is-active=\"item.name === 'Messages & media'\"\n                    >\n                      <a href=\"#\">\n                        <component :is=\"item.icon\" />\n                        <span>{{ item.name }}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n        </Sidebar>\n        <main class=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n          <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n            <div class=\"flex items-center gap-2 px-4\">\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem class=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Settings\n                    </BreadcrumbLink>\n                  </BreadcrumbItem>\n                  <BreadcrumbSeparator class=\"hidden md:block\" />\n                  <BreadcrumbItem>\n                    <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                  </BreadcrumbItem>\n                </BreadcrumbList>\n              </Breadcrumb>\n            </div>\n          </header>\n          <div class=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n            <div\n              v-for=\"i in 10\"\n              :key=\"i\"\n              class=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n            />\n          </div>\n        </main>\n      </SidebarProvider>\n    </DialogContent>\n  </Dialog>\n</template>\n"
    },
    {
      "path": "blocks/sidebar-13/page.vue",
      "type": "registry:file",
      "target": "blocks/sidebar-13/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = \"A sidebar in a dialog.\"\nexport const iframeHeight = \"800px\"\n</script>\n\n<script setup lang=\"ts\">\nimport SettingsDialog from \"./components/SettingsDialog.vue\"\n</script>\n\n<template>\n  <div class=\"flex h-svh items-center justify-center\">\n    <SettingsDialog />\n  </div>\n</template>\n"
    }
  ]
}