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

const { user } = useAuth()
const { t, tm, rt } = useI18n()
const localePath = useLocalePath()

const items = useI18nMenus<NavigationMenuItem>('home.menuItems', tm, rt)
</script>

<template>
  <div>
    <UHeader
      :title="t('website.title')"
      :to="localePath('/')"
      toggle-side="left"
    >
      <template #right>
        <LanguageSwitcher />
        <UButton
          :to="localePath('/dashboard')"
          :label="t('dashboard.title')"
        />
        <UserMenu
          v-if="user"
          collapsed
          show-login-button
        />
        <UColorModeButton
          v-else
          as="button"
          :disabled="false"
        />
      </template>
      <template #body>
        <UNavigationMenu
          v-if="items.length > 0"
          :items="items"
          orientation="vertical"
          class="-mx-2.5"
        />
      </template>
    </UHeader>
    <slot />
  </div>
</template>
