18 lines
2.8 KiB
JSON
18 lines
2.8 KiB
JSON
{
|
|
"name": "DemoSidebarMenuAction",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"dropdown-menu",
|
|
"sidebar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/DemoSidebarMenuAction.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from '@/registry/default/ui/sidebar'\nimport {\n Frame,\n LifeBuoy,\n Map,\n MoreHorizontal,\n PieChart,\n Send,\n} from 'lucide-vue-next'\n\nconst projects = [\n {\n name: 'Design Engineering',\n url: '#',\n icon: Frame,\n },\n {\n name: 'Sales & Marketing',\n url: '#',\n icon: PieChart,\n },\n {\n name: 'Travel',\n url: '#',\n icon: Map,\n },\n {\n name: 'Support',\n url: '#',\n icon: LifeBuoy,\n },\n {\n name: 'Feedback',\n url: '#',\n icon: Send,\n },\n]\n</script>\n\n<template>\n <SidebarProvider>\n <Sidebar>\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Projects</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"project in projects\" :key=\"project.name\">\n <SidebarMenuButton\n as-child\n class=\"group-has-[[data-state=open]]/menu-item:bg-sidebar-accent\"\n >\n <a :href=\"project.url\">\n <component :is=\"project.icon\" />\n <span>{{ project.name }}</span>\n </a>\n </SidebarMenuButton>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuAction>\n <MoreHorizontal />\n <span class=\"sr-only\">More</span>\n </SidebarMenuAction>\n </DropdownMenuTrigger>\n <DropdownMenuContent side=\"right\" align=\"start\">\n <DropdownMenuItem>\n <span>Edit Project</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <span>Delete Project</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n </SidebarProvider>\n</template>\n",
|
|
"type": "registry:block",
|
|
"target": "pages/dashboard/index.vue"
|
|
}
|
|
]
|
|
}
|