A Nested menu

A nested tool tip with 5 level

generate nested tooltip

nested not 3 level

Help me create menu component i have state = open is collapse nested, state = close is tooltip nested

<script setup lang="ts"> import { Button } from '@/components/ui/button' import { SidebarMenuItem } from '@/components/ui/sidebar/index.ts' import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip' import type { SidebarCollapsibleItem } from '@/types/SidebarCollapsibleItem.ts' import { ChevronRight } from 'lucide-vue-next' const props = withDefaults(defineProps<{ item: SidebarCollapsibleItem }>(), { }) </script> <template> <TooltipProvider :delay-duration="100"> <Tooltip> <TooltipTrigger as-child> <Button v-for="subItem in item.children" :key="subItem.title" variant="ghost" class="w-full justify-start gap-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors duration-200" > <component :is="subItem.icon || item.icon" class="w-4 h-4 text-gray-500 dark:text-gray-400" /> <span class="flex-grow text-left">{{ subItem.title }}</span> <ChevronRight class="ml-auto w-4 h-4 text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-all duration-300" /> </Button> </TooltipTrigger> <TooltipContent side="right" align="center"> <NestedSidebarTooltip v-for="(subItem, index) in item.children" :key="index" :item="subItem" /> </TooltipContent> </Tooltip> </TooltipProvider> </template> <script lang="ts"> export default { name: 'NestedSidebarTooltip' } </script>

<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