69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { LucideIcon } from "lucide-vue-next"
|
|
import { ChevronRight } from "lucide-vue-next"
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from '@/components/ui/collapsible'
|
|
import {
|
|
SidebarGroup,
|
|
SidebarGroupLabel,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarMenuSub,
|
|
SidebarMenuSubButton,
|
|
SidebarMenuSubItem,
|
|
} from '@/components/ui/sidebar'
|
|
|
|
defineProps<{
|
|
items: {
|
|
title: string
|
|
url: string
|
|
icon?: LucideIcon
|
|
isActive?: boolean
|
|
items?: {
|
|
title: string
|
|
url: string
|
|
}[]
|
|
}[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarGroup>
|
|
<SidebarGroupLabel>Platform</SidebarGroupLabel>
|
|
<SidebarMenu>
|
|
<Collapsible
|
|
v-for="item in items"
|
|
:key="item.title"
|
|
as-child
|
|
:default-open="item.isActive"
|
|
class="group/collapsible"
|
|
>
|
|
<SidebarMenuItem>
|
|
<CollapsibleTrigger as-child>
|
|
<SidebarMenuButton :tooltip="item.title">
|
|
<component :is="item.icon" v-if="item.icon" />
|
|
<span>{{ item.title }}</span>
|
|
<ChevronRight class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
|
|
<SidebarMenuSubButton as-child>
|
|
<a :href="subItem.url">
|
|
<span>{{ subItem.title }}</span>
|
|
</a>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</SidebarGroup>
|
|
</template>
|