Menu with Links

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

  const links = [
    {
      value: 'components',
      label: '컴포넌트',
      description: '구현 상태 확인',
      href: '/components',
    },
    { value: 'examples', label: '예시', description: '조합 패턴 확인', href: '/examples' },
    { value: 'theme', label: '테마', description: 'token 조정', href: '/theme' },
  ]
</script>

<Menu.Root>
  <Menu.Trigger class="odbd-button" data-variant="outline" data-size="md">
    문서 이동
    <Menu.Indicator>▾</Menu.Indicator>
  </Menu.Trigger>
  <Menu.Positioner>
    <Menu.Content style="width: 16rem;">
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>문서</Menu.ItemGroupLabel>
        {#each links as link}
          <Menu.Item value={link.value} class="examples-menu-item">
            {#snippet asChild(props)}
              <a {...props()} href={link.href}>
                <span>{link.label}</span>
                <small>{link.description}</small>
              </a>
            {/snippet}
          </Menu.Item>
        {/each}
      </Menu.ItemGroup>
      <Menu.Separator />
      <Menu.Item value="changelog" disabled>변경 기록을 준비 중이에요.</Menu.Item>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>