18 lines
4.4 KiB
JSON
18 lines
4.4 KiB
JSON
{
|
|
"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"
|
|
}
|
|
]
|
|
}
|