{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "sidebar-03",
  "title": "Sidebar 03",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/sidebar-03/Sidebar03.vue",
      "content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport SearchForm from './SearchForm.vue'\nimport VersionSwitcher from './VersionSwitcher.vue'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from '@/components/ui/sidebar'\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      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar>\n    <SidebarHeader>\n      <VersionSwitcher :versions=\"data.versions\" :default-version=\"data.versions[0]!\" />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\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=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-03/Sidebar03.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-03/SearchForm.vue",
      "content": "<script setup lang=\"ts\">\nimport { Search } from 'lucide-vue-next'\nimport { Label } from '@/components/ui/label'\nimport { SidebarGroup, SidebarGroupContent, SidebarInput } from '@/components/ui/sidebar'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent>\n        <Label for=\"search\" class=\"sr-only\">Search</Label>\n        <SidebarInput id=\"search\" type=\"text\" placeholder=\"Search the docs...\" :allow-clear=\"true\">\n          <template #prefix>\n            <Search class=\"text-muted-foreground size-3.5\" />\n          </template>\n        </SidebarInput>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-03/SearchForm.vue"
    },
    {
      "path": "packages/registry-vue/blocks/sidebar-03/VersionSwitcher.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\n\nimport { ref } from 'vue'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'\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\n              class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\"\n            >\n              <svg viewBox=\"0 0 24 24\" class=\"size-4\" fill=\"currentColor\" aria-hidden=\"true\">\n                <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n                <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n                <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n              </svg>\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-medium\">uipkge</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent class=\"w-(--reka-dropdown-menu-trigger-width)\" align=\"start\">\n          <DropdownMenuItem v-for=\"version in versions\" :key=\"version\" @select=\"selectedVersion = version\">\n            v{{ version }}\n            <Check v-if=\"selectedVersion === version\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/sidebar-03/VersionSwitcher.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/sidebar.json",
    "https://uipkge.dev/r/vue/collapsible.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/label.json"
  ],
  "description": "Docs-style sidebar with a version switcher at the top, a search input below, and collapsible navigation groups. All sample data inlined so consumers edit routes in place.",
  "categories": [
    "sidebar",
    "layout"
  ]
}