{
  "name": "Sidebar01",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "breadcrumb",
    "dropdown-menu",
    "label",
    "separator",
    "sidebar"
  ],
  "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 { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\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        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\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>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(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\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"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      </SidebarHeader>\n\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=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\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\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": "Sidebar01Page.vue"
    }
  ]
}