{
  "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"
    }
  ]
}