<script setup lang="ts">
const items = [{
  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>
  <header
    class="bg-background/75 backdrop-blur -mb-px sticky top-0 z-50 border-b border-dashed border-gray-200/80 dark:border-gray-800/80"
  >
    <UContainer class="flex items-center justify-between gap-3 h-16 py-2">
      <AppLogo class="lg:flex-1" />

      <UNavigationMenu
        orientation="horizontal"
        :items="items"
        class="hidden lg:block"
      />

      <div class="flex items-center justify-end gap-3 lg:flex-1">
        <UserDropdown />
      </div>
    </UContainer>
  </header>
</template>
