Multi-level collapsible menu

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "chevron-right"/"layout-dashboard"/"user"/
  "credit-card"/"settings"/"bell") — см. docs/PORTING.md §5. Ни один
  `Collapsible` здесь не раскрыт по умолчанию, поэтому иконки вложенных
  пунктов (analytics/reports/members/permissions/...) не монтируются и не
  требуют адаптации — видны только 5 корневых иконок.
-->
<script setup lang="ts">
import { Card, CardContent } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { Item, ItemMedia, ItemTitle } from "@/components/ui/item"
</script>

<template>
  <div class="min-h-64 w-full max-w-56">
    <Card class="p-0">
      <CardContent class="p-1">
        <div class="gap-0/5 flex flex-col">
          <Collapsible class="group/collapsible">
            <CollapsibleTrigger as-child>
              <Item size="xs" class="hover:bg-accent data-[state=open]:bg-accent group/item cursor-pointer py-1.25" :style="{ paddingLeft: '8px' }">
                <ItemMedia variant="icon">
                  <div class="text-muted-foreground group-hover/item:text-foreground size-3.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <rect width="7" height="9" x="3" y="3" rx="1" />
                      <rect width="7" height="5" x="14" y="3" rx="1" />
                      <rect width="7" height="9" x="14" y="12" rx="1" />
                      <rect width="7" height="5" x="3" y="16" rx="1" />
                    </svg>
                  </div>
                </ItemMedia>
                <ItemTitle class="data-[state=open]/collapsible:font-semibold text-sm">Dashboard</ItemTitle>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-muted-foreground ml-auto size-4 transition-transform in-data-[state=open]:rotate-90">
                  <path d="m9 18 6-6-6-6" />
                </svg>
              </Item>
            </CollapsibleTrigger>
            <CollapsibleContent class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden pt-0.5">
              <div class="flex flex-col gap-0.5" />
            </CollapsibleContent>
          </Collapsible>

          <Collapsible class="group/collapsible">
            <CollapsibleTrigger as-child>
              <Item size="xs" class="hover:bg-accent data-[state=open]:bg-accent group/item cursor-pointer py-1.25" :style="{ paddingLeft: '8px' }">
                <ItemMedia variant="icon">
                  <div class="text-muted-foreground group-hover/item:text-foreground size-3.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
                      <circle cx="12" cy="7" r="4" />
                    </svg>
                  </div>
                </ItemMedia>
                <ItemTitle class="data-[state=open]/collapsible:font-semibold text-sm">Team</ItemTitle>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="text-muted-foreground ml-auto size-4 transition-transform in-data-[state=open]:rotate-90">
                  <path d="m9 18 6-6-6-6" />
                </svg>
              </Item>
            </CollapsibleTrigger>
            <CollapsibleContent class="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden pt-0.5">
              <div class="flex flex-col gap-0.5" />
            </CollapsibleContent>
          </Collapsible>

          <Item
            size="xs"
            class="hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground group/item cursor-pointer py-1.25"
            :data-active="false"
            :style="{ paddingLeft: '8px' }"
          >
            <ItemMedia variant="icon">
              <div class="text-muted-foreground group-hover/item:text-foreground group-data-[active=true]/item:text-foreground size-3.5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <rect width="20" height="14" x="2" y="5" rx="2" />
                  <line x1="2" x2="22" y1="10" y2="10" />
                </svg>
              </div>
            </ItemMedia>
            <ItemTitle class="text-sm">Billing</ItemTitle>
          </Item>

          <Item
            size="xs"
            class="hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground group/item cursor-pointer py-1.25"
            :data-active="false"
            :style="{ paddingLeft: '8px' }"
          >
            <ItemMedia variant="icon">
              <div class="text-muted-foreground group-hover/item:text-foreground group-data-[active=true]/item:text-foreground size-3.5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
                  <circle cx="12" cy="12" r="3" />
                </svg>
              </div>
            </ItemMedia>
            <ItemTitle class="text-sm">Settings</ItemTitle>
          </Item>

          <Item
            size="xs"
            class="hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground group/item cursor-pointer py-1.25"
            :data-active="false"
            :style="{ paddingLeft: '8px' }"
          >
            <ItemMedia variant="icon">
              <div class="text-muted-foreground group-hover/item:text-foreground group-data-[active=true]/item:text-foreground size-3.5">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M10.268 21a2 2 0 0 0 3.464 0" />
                  <path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326" />
                </svg>
              </div>
            </ItemMedia>
            <ItemTitle class="text-sm">Notifications</ItemTitle>
          </Item>
        </div>
      </CardContent>
    </Card>
  </div>
</template>