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