{
  "name": "DemoSidebarMenuCollapsible",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [
    "collapsible",
    "sidebar"
  ],
  "files": [
    {
      "path": "block/DemoSidebarMenuCollapsible.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst items = [\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</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <Collapsible\n                v-for=\"(item, index) in items\"\n                :key=\"index\"\n                class=\"group/collapsible\"\n                :default-open=\"index === 0\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger as-child>\n                    <SidebarMenuButton>\n                      <span>{{ item.title }}</span>\n                      <ChevronRight class=\"transition-transform ml-auto group-data-[state=open]/collapsible:rotate-90\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      <SidebarMenuSubItem v-for=\"(subItem, subIndex) in item.items\" :key=\"subIndex\">\n                        <SidebarMenuSubButton as-child>\n                          <a :href=\"subItem.url\">\n                            <span>{{ subItem.title }}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </SidebarMenuItem>\n              </Collapsible>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  </SidebarProvider>\n</template>\n",
      "type": "registry:block",
      "target": "pages/dashboard/index.vue"
    }
  ]
}