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

  const route = useRoute();

  const items = computed<NavigationMenuItem[]>(() => [{
    label: 'Home',
    to: '/',
    icon: 'i-line-md-home-twotone',
    active: route.path == '/'
  }, {
    label: 'Projects',
    to: '/projects',
    icon: 'i-line-md-document-code-twotone',
    active: route.path.startsWith('/projects')
  }, {
    label: 'Blog',
    icon: 'i-line-md-text-box-multiple-twotone',
    to: '/blog',
    active: route.path.startsWith('/blog')
  }, {
    label: 'About Me',
    icon: 'i-line-md-question-circle-twotone',
    to: '/about',
    active: route.path.startsWith('/about')
  }])
</script>

<template>
  <UHeader
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  >
    <template #title>
      ZervoDev
    </template>

    <UNavigationMenu :items="items" />

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

    <template #body>
      <UNavigationMenu :items="items" orientation="vertical" class="-mx-2.5" />
    </template>
  </UHeader>
</template>