{
  "name": "Sidebar01",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "AppSidebar.vue",
    "breadcrumb",
    "separator",
    "sidebar",
    "SearchForm.vue",
    "VersionSwitcher.vue",
    "label",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "block/Sidebar01/page.vue",
      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar01/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/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 orientation=\"vertical\" class=\"mr-2 h-4\" />\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=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
      "type": "registry:page",
      "target": "pages/dashboard/index.vue"
    },
    {
      "path": "block/Sidebar01/components/AppSidebar.vue",
      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar01/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar01/components/VersionSwitcher.vue'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\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      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n        <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n        <SidebarGroupContent>\n          <SidebarMenu>\n            <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n              <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                <a :href=\"childItem.url\">{{ childItem.title }}</a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroupContent>\n      </SidebarGroup>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar01/components/SearchForm.vue",
      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
      "type": "registry:component",
      "target": ""
    },
    {
      "path": "block/Sidebar01/components/VersionSwitcher.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\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            <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-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:component",
      "target": ""
    }
  ]
}