Menu experimental

<script lang="ts">
  import * as Menu from '@odbd/svelte/menu'

  let showLineNumbers = $state(true)
  let theme = $state('system')
</script>

<div style="max-width: 30rem;">
  <Menu.Root>
    <Menu.Trigger class="odbd-button" data-variant="outline" data-size="md">
      보기 메뉴
      <Menu.Indicator>▾</Menu.Indicator>
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel>빠른 작업</Menu.ItemGroupLabel>
          <Menu.Item value="open-dashboard">대시보드 열기</Menu.Item>
          <Menu.Item value="copy-link">공유 링크 복사</Menu.Item>
          <Menu.Item value="manage-permissions" disabled>권한 관리</Menu.Item>
        </Menu.ItemGroup>
        <Menu.Separator />
        <Menu.CheckboxItem
          value="line-numbers"
          checked={showLineNumbers}
          onCheckedChange={(checked) => (showLineNumbers = checked)}
        >
          <Menu.ItemText>줄 번호 표시</Menu.ItemText>
          <Menu.ItemIndicator>✓</Menu.ItemIndicator>
        </Menu.CheckboxItem>
        <Menu.Separator />
        <Menu.RadioItemGroup value={theme} onValueChange={(e) => (theme = e.value)}>
          <Menu.ItemGroupLabel>테마</Menu.ItemGroupLabel>
          <Menu.RadioItem value="system">
            <Menu.ItemText>시스템</Menu.ItemText>
            <Menu.ItemIndicator>✓</Menu.ItemIndicator>
          </Menu.RadioItem>
          <Menu.RadioItem value="light">
            <Menu.ItemText>라이트</Menu.ItemText>
            <Menu.ItemIndicator>✓</Menu.ItemIndicator>
          </Menu.RadioItem>
          <Menu.RadioItem value="dark">
            <Menu.ItemText>다크</Menu.ItemText>
            <Menu.ItemIndicator>✓</Menu.ItemIndicator>
          </Menu.RadioItem>
        </Menu.RadioItemGroup>
        <Menu.Separator />
        <Menu.Item value="sign-out">로그아웃</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</div>