ff-webpage/components/Header.vue

<template>
  <div class="sticky top-0 h-fit">
    <div
      primary
      class="h-24 min-h-fit w-full px-4 md:px-12 py-2.5 justify-between items-center gap-5 flex overflow-hidden"
    >
      <NuxtLink to="/">
        <img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
      </NuxtLink>
      <div class="md:hidden">
        <svg
          v-if="!open"
          viewBox="0 0 24 24"
          class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
          @click="open = !open"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
        </svg>
        <svg
          v-else
          viewBox="0 0 24 24"
          class="h-10 w-10 cursor-pointer fill-none stroke-2 stroke-white"
          @click="open = !open"
        >
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
        </svg>
      </div>

      <div
        class="w-fit max-w-full p-2.5 justify-center items-center gap-7 flex flex-col md:flex-row md:flex-wrap"
        :class="open ? 'max-md:absolute top-24 left-0 max-md:w-full bg-primary' : 'max-md:hidden'"
      >
        <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-4 md:px-12 border-t-2 border-white justify-center items-center gap-5 flex flex-row max-md:flex-wrap"
    >
      <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' : ''"
        class="w-fit"
      >
        {{ sublink.name }}
      </NuxtLink>
    </div>
  </div>
</template>

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

const {
  params: { slug: params },
} = useRoute();
const runtimeConfig = useRuntimeConfig();
const baseUrl = runtimeConfig.public.strapi.url;
const { findOne } = useStrapi();

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

const open = ref(false);

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