<script lang="ts" setup>
import type {NavigationMenuItem} from '@nuxt/ui'

const route = useRoute()

const items = computed<NavigationMenuItem[]>(() => [
  {
    label: 'Docs',
    to: '/docs/getting-started',
    active: route.path.startsWith('/docs/getting-started')
  },
  {
    label: 'Components',
    to: '/docs/components',
    active: route.path.startsWith('/docs/components')
  },
  {
    label: 'Figma',
    to: 'https://go.nuxt.com/figma-ui',
    target: '_blank'
  },
  {
    label: 'Releases',
    to: 'https://github.com/nuxt/ui/releases',
    target: '_blank'
  }
])
</script>

<template>
  <UHeader>
    <template #title>
      <IndexLogo class="h-6 w-auto"/>
    </template>

    <UNavigationMenu :items="items"/>

    <template #right>
      <ColorModeButton/>

      <!--      <UTooltip :kbds="['meta', 'G']" text="Open on GitHub">-->
      <!--        <UButton-->
      <!--            aria-label="GitHub"-->
      <!--            color="neutral"-->
      <!--            icon="i-simple-icons-github"-->
      <!--            target="_blank"-->
      <!--            to="https://github.com/nuxt/ui"-->
      <!--            variant="ghost"-->
      <!--        />-->
      <!--      </UTooltip>-->
    </template>
    <template #body>
      <div class="px-4 py-2">
        <UNavigationMenu
            :items="items"
            class="-mx-2.5"
            orientation="vertical"
        />
      </div>
    </template>
  </UHeader>
</template>
