<script setup lang="ts">
const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: 'https://ui.nuxt.com/getting-started',
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: 'https://ui.nuxt.com/pro',
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank',
}]
</script>

<template>
  <UHeader :links="links">
    <template #logo>
      <Logo class="h-6 w-auto" />
    </template>

    <template #right>
      <UColorModeButton />
      <UserDropdown />
    </template>

    <template #panel>
      <UNavigationTree :links="links" />
    </template>
  </UHeader>
</template>
