Dropdown menu

import {
  Menu, MenuItem, MenuTrigger,
  BuiDropdownMenu, BuiDropdownMenuItem, BuiDropdownMenuLabel, BuiDropdownMenuSeparator,
} from 'ng-blatui';

<div class="relative inline-block">
  <button buiButton variant="outline" ngMenuTrigger [menu]="m">Open menu</button>
  <div ngMenu #m="ngMenu" buiDropdownMenu>
    <div buiDropdownMenuLabel>My account</div>
    <div buiDropdownMenuSeparator></div>
    <div ngMenuItem value="profile" buiDropdownMenuItem>Profile</div>
    <div ngMenuItem value="settings" buiDropdownMenuItem>Settings</div>
  </div>
</div>

<div ngMenuItem value="profile" buiDropdownMenuItem>
  <svg><!-- user --></svg> Profile
</div>
<div buiDropdownMenuSeparator></div>
<div ngMenuItem value="logout" buiDropdownMenuItem><svg><!-- logout --></svg> Log out</div>

<div buiDropdownMenuLabel>
  <div class="flex flex-col"><span class="font-medium">Sofia Carter</span><span class="text-muted-foreground text-xs">[email protected]</span></div>
</div>
<div buiDropdownMenuSeparator></div>
<div ngMenuItem value="profile" buiDropdownMenuItem>Profile</div>

<!-- compose a checkbox item: a signal + a conditional check indicator -->
<div ngMenuItem buiDropdownMenuItem (click)="statusBar.set(!statusBar())">
  <span class="inline-flex w-4 justify-center">
    @if (statusBar()) { <svg><path d="M20 6 9 17l-5-5" /></svg> }
  </span>
  Status bar
</div>

<!-- radio: one signal holds the selected value -->
<div ngMenuItem [value]="pos" buiDropdownMenuItem (click)="panel.set(pos)">
  <span class="inline-flex w-4 justify-center">
    @if (panel() === pos) { <svg viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" /></svg> }
  </span>
  {{ pos }}
</div>

<!-- a relative wrapper + group-hover flyout, styled with buiDropdownMenuItem -->
<div class="group/sub relative">
  <div ngMenuItem buiDropdownMenuItem class="justify-between">Invite users <svg><!-- chevron --></svg></div>
  <div class="absolute top-0 left-full ml-1 hidden ... group-hover/sub:block">
    <button buiDropdownMenuItem>Email</button>
    <button buiDropdownMenuItem>Message</button>
  </div>
</div>