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