A modern landing page.

<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>