56 lines
1.8 KiB
Vue
56 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { SidebarMenuButtonVariants } from '~/components/pub/ui/sidebar'
|
|
import { useSidebar } from '~/components/pub/ui/sidebar'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
item: any
|
|
size?: SidebarMenuButtonVariants['size']
|
|
}>(),
|
|
{
|
|
size: 'default',
|
|
},
|
|
)
|
|
|
|
const { setOpenMobile } = useSidebar()
|
|
|
|
const openCollapsible = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<SidebarMenu>
|
|
<Collapsible :key="item.title" v-model:open="openCollapsible" as-child class="group/collapsible ">
|
|
<SidebarMenuItem>
|
|
<CollapsibleTrigger as-child>
|
|
<SidebarMenuButton :tooltip="item.title" :size="size" class="md:!text-xs 2xl:!text-sm">
|
|
<Icon :name="item.icon || ''" mode="svg" />
|
|
<span class="mx-2">{{ item.title }}</span>
|
|
<Icon
|
|
name="i-lucide-chevron-right"
|
|
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
|
|
/>
|
|
</SidebarMenuButton>
|
|
</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<SidebarMenuSub>
|
|
<SidebarMenuSubItem v-for="subItem in item.children" :key="subItem.title">
|
|
<SidebarMenuSubButton as-child>
|
|
<NuxtLink
|
|
:to="subItem.link"
|
|
class="mx-4 rounded-lg py-2 2xl:py-2.5 text-sm transition-all duration-200 md:!text-xs 2xl:!text-sm"
|
|
active-class="bg-primary text-white"
|
|
@click="setOpenMobile(false)"
|
|
>
|
|
<span>{{ subItem.title }}</span>
|
|
</NuxtLink>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</template>
|
|
|
|
<style scoped></style>
|