t<script setup lang="ts">
import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
import { Button } from '@/components/ui/button'
import { MailIcon } from 'lucide-vue-next'
import { useSidebar } from '@/components/ui/sidebar'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { onMounted, ref } from 'vue'
import type { MenuAdmin } from '@/types/menuAdmin'
import { getMenuAdmin } from '@/services/module/api'
import MenuAdminIcon from '@/components/icons/MenuAdminIcon.vue'
const { open } = useSidebar()
const menu = ref<MenuAdmin[]>([])
onMounted(async () => {
const { data } = await getMenuAdmin()
menu.value = data
})
</script>
<template>
<li class="w-full inline-block" v-for="(item, index) in menu" :key="index">
<HoverCard v-if="!open" :open-delay="300">
<HoverCardTrigger>
<Button variant="ghost">
<MenuAdminIcon class="h-4 w-4 mr-2" v-if="item.icon" :name="item.icon" />
</Button>
</HoverCardTrigger>
<HoverCardContent align="center" side="right" class="p-2">
<Button
variant="ghost"
class="w-full justify-start"
v-for="(child, index) in item.children"
:key="index"
>
{{ child.title }}
</Button>
</HoverCardContent>
</HoverCard>
<Collapsible v-else>
<CollapsibleTrigger class="w-full justify-start">
<Button variant="ghost" class="w-full justify-start">
<MenuAdminIcon class="h-4 w-4 mr-2" v-if="item.icon" :name="item.icon" />
{{ item.title }}
</Button>
</CollapsibleTrigger>
<CollapsibleContent v-for="(child, index) in item.children" :key="index">
<Button variant="ghost" class="w-full justify-start">
{{ child.title }}
</Button>
</CollapsibleContent>
</Collapsible>
</li>
</template>