ff-webpage/components/Header.vue

<template>
  <div class="sticky top-0 h-fit">
    <div primary class="h-24 min-h-fit w-full px-12 py-2.5 justify-between items-center gap-5 flex">
      <NuxtLink to="/">
        <img class="h-16 w-fit" :src="baseUrl + navbar.logo.url" />
      </NuxtLink>
      <div class="self-stretch p-2.5 justify-center items-center gap-7 flex">
        <NuxtLink
          primary-link
          v-for="link in navbar.navbar_items"
          :key="link.id"
          :to="`/${link.URL}/${link.default_active_child ?? ''}`"
          :class="link.URL == params?.[0] ? 'active' : ''"
        >
          {{ link.name }}
        </NuxtLink>
      </div>
    </div>
    <div
      v-if="navbar_sub_items && navbar_sub_items?.length != 0"
      primary
      class="h-fit min-h-fit w-full px-12 border-t-2 border-white justify-center items-center gap-5 flex"
    >
      <NuxtLink
        primary-sublink
        v-for="sublink in navbar_sub_items"
        :key="sublink.id"
        :to="`/${params?.[0]}/${sublink.URL}`"
        :class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
      >
        {{ sublink.name }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import type Global from "../types/single/global";

const {
  params: { slug: params },
} = useRoute();
const baseUrl = useStrapiUrl().replace("/api", "");
const { findOne } = useStrapi();

const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const { navbar } = global.value?.data ?? ({} as Global);

const navbar_sub_items = computed(() => {
  return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items;
});
</script>