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

<script setup lang="ts"> import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible' import { MailIcon } from 'lucide-vue-next' import { Button } from '@/components/ui/button' import { useSidebar } from '@/components/ui/sidebar' const { open } = useSidebar() </script> <template> <Collapsible class="space-y-2"> <CollapsibleTrigger as-child> <li class="w-full justify-start"> <MailIcon class="w-4 h-4" /> <span v-if="open">Mail</span> </li> </CollapsibleTrigger> <CollapsibleContent class="space-y-2"> <Button variant="ghost" class="w-full justify-start"> @radix-ui/colors</Button> </CollapsibleContent> </Collapsible> </template> fix the ui better, will only show the icon when closed, when hovering over the icon will show a popup inside a nested menu

combobox sroll infinity

parent can select

parent can select

Click on the new select call api to update options for the select

shadcn vue select trigger call api in form example