NavigationMenu experimental

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

  const menus = [
    {
      value: 'product',
      label: '제품',
      links: [
        { href: '#tokens', text: '디자인 토큰' },
        { href: '#recipes', text: '컴포넌트 recipe' },
        { href: '#themes', text: '테마 계약' },
      ],
    },
    {
      value: 'resource',
      label: '리소스',
      links: [
        { href: '#guide', text: '가이드' },
        { href: '#catalog', text: '컴포넌트 카탈로그' },
      ],
    },
  ]
</script>

<NavigationMenu.Root style="inline-size: fit-content; margin-inline: auto;">
  <NavigationMenu.List>
    {#each menus as menu}
      <NavigationMenu.Item value={menu.value}>
        <NavigationMenu.Trigger>
          {menu.label}
          <svg class="nav-chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path
              d="M4 6l4 4 4-4"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </NavigationMenu.Trigger>
        <NavigationMenu.Content>
          {#each menu.links as link}
            <NavigationMenu.Link href={link.href}>{link.text}</NavigationMenu.Link>
          {/each}
        </NavigationMenu.Content>
      </NavigationMenu.Item>
    {/each}
    <NavigationMenu.Item value="docs">
      <NavigationMenu.Link href="#docs">문서</NavigationMenu.Link>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>

<style>
  .nav-chevron {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--odbd-color-muted-foreground);
    transition: transform var(--odbd-motion-fast) ease;
  }

  :global(.odbd-navigation-menu__trigger[data-state='open']) .nav-chevron {
    transform: rotate(180deg);
  }
</style>