Add initial support for a header menu

composer.json

@@ -20,7 +20,7 @@
     "require": {
         "composer/installers": "^2.0",
         "cweagans/composer-patches": "~1.0",
-        "dobefu/nuxtify_profile": "^1.0.0-alpha3",
+        "dobefu/nuxtify_profile": "^1.0.x-dev",
         "drupal/core-composer-scaffold": "^10.2",
         "drupal/core-recommended": "^10"
     },

frontend/components/base/AuthBtns.vue

@@ -5,7 +5,7 @@ const localePath = useLocalePath()
 </script>
 
 <template>
-  <div class="font-semibold">
+  <div>
     <ClientOnly>
       <template #fallback>
         <div class="relative w-16 max-w-full">

frontend/components/layout/Header.vue

@@ -1,24 +1,49 @@
 <script setup lang="ts">
+import type { MenuAvailable } from '#build/graphql-operations'
+
 const config = useRuntimeConfig()
 const localePath = useLocalePath()
 
-const { t } = useI18n()
+const { locale, t } = useI18n()
+
+const { data: menu } = await useAsyncData(
+  'menu',
+  async () => await useGraphqlQuery(
+    'menu',
+    {
+      name: 'MAIN' as MenuAvailable,
+      langcode: locale.value,
+    },
+  ),
+)
 </script>
 
 <template>
   <header>
-    <div class="flex items-center justify-between max-w-6xl gap-4 py-4 sm:py-8 m-auto border-b">
-      <NuxtLink
-        class="text-xl sm:text-2xl font-semibold flex items-center gap-2"
-        :to="localePath('/')"
-      >
-        <NuxtImg
-          class="w-8 h-8 sm:w-12 sm:h-12"
-          src="/logo.svg"
-          :alt="t('site_logo', { name: config.public.siteName })"
-        />
-        {{ config.public.siteName }}
-      </NuxtLink>
+    <div class="flex items-center justify-between max-w-6xl gap-4 py-4 sm:py-8 m-auto border-b font-semibold">
+      <div class="flex items-center gap-3 sm:gap-6">
+        <NuxtLink
+          class="text-xl sm:text-2xl flex items-center gap-2"
+          :to="localePath('/')"
+        >
+          <NuxtImg
+            class="w-8 h-8 sm:w-12 sm:h-12"
+            src="/logo.svg"
+            :alt="t('site_logo', { name: config.public.siteName })"
+          />
+          {{ config.public.siteName }}
+        </NuxtLink>
+
+        <nav>
+          <NuxtLink
+            v-for="item in menu?.data?.menu?.items"
+            :key="item.id"
+            :to="localePath(item?.url || '')"
+          >
+            {{ item.title }}
+          </NuxtLink>
+        </nav>
+      </div>
 
       <BaseAuthBtns />
     </div>

frontend/composables/useAuth.ts

@@ -11,7 +11,7 @@ export default async function useAuth() {
       return
 
     try {
-      const userData: User | undefined = await $fetch('/api/auth/session', {
+      const userData = await $fetch<User | undefined>('/api/auth/session', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

frontend/nuxt.config.ts

@@ -43,9 +43,6 @@ export default defineNuxtConfig({
   },
 
   routeRules: {
-    '/': {
-      swr: 300,
-    },
     '/api/**': {
       robots: false,
       sitemap: false,
@@ -148,7 +145,6 @@ export default defineNuxtConfig({
       '/api/sitemap',
     ],
     exclude: [
-      '/api/**',
       '/user',
       '/user/logout',
       '/user/register/confirm',

frontend/queries/menu.query.gql

@@ -0,0 +1,9 @@
+query menu($name: MenuAvailable!, $langcode: String!) {
+  menu(name: $name, langcode: $langcode) {
+    items {
+      id
+      title
+      url
+    }
+  }
+}

frontend/server/api/auth/session.post.ts

@@ -7,9 +7,9 @@ export default eventHandler(async (event): Promise<User | undefined> => {
   const uid = body.uid
 
   try {
-    const user: {
+    const user = await $fetch<{
       [key: string]: { value: string }[]
-    } = await $fetch(`${process.env.NUXT_PUBLIC_BACKEND_URL}/user/${uid}?_format=json`, {
+    }>(`${process.env.NUXT_PUBLIC_BACKEND_URL}/user/${uid}?_format=json`, {
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${token}`,

frontend/server/api/sitemap.ts

@@ -13,7 +13,7 @@ export default defineEventHandler(async (_event) => {
     let cursor = '0'
 
     do {
-      const { data }: { data: SitemapQuery } = await $fetch('/api/graphql/query/sitemap', {
+      const { data } = await $fetch<{ data: SitemapQuery }>('/api/graphql/query/sitemap', {
         query: {
           __variables: JSON.stringify({
             first: itemsPerPage,