63 lines
2.0 KiB
Vue
63 lines
2.0 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">
|
|
<Icon :name="item.icon || ''" mode="svg" />
|
|
<span>{{ item.title }}</span>
|
|
<span
|
|
v-if="item.new"
|
|
class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline"
|
|
>
|
|
New
|
|
</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" @click="setOpenMobile(false)">
|
|
<span>{{ subItem.title }}</span>
|
|
<span
|
|
v-if="subItem.new"
|
|
class="bg-#adfa1d rounded-md px-1.5 py-0.5 text-xs leading-none text-black no-underline group-hover:no-underline"
|
|
>
|
|
New
|
|
</span>
|
|
</NuxtLink>
|
|
</SidebarMenuSubButton>
|
|
</SidebarMenuSubItem>
|
|
</SidebarMenuSub>
|
|
</CollapsibleContent>
|
|
</SidebarMenuItem>
|
|
</Collapsible>
|
|
</SidebarMenu>
|
|
</template>
|
|
|
|
<style scoped></style>
|