<template> <header class="sticky top-0 h-fit z-50"> <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 v-if="logo" class="h-16" :src="baseUrl + logo.url" /> <img v-else class="h-16" src="/favicon.png" /> </NuxtLink> <div v-if="navbar" 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 v-if="navbar" 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 ? '/' + 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> </header> </template> <script setup lang="ts"> import provideGlobal from "../composables/provideGlobal"; const { params: { slug: params }, } = useRoute(); const runtimeConfig = useRuntimeConfig(); const baseUrl = runtimeConfig.public.strapi.url; const { logo, navbar } = await provideGlobal(); const open = ref(false); const navbar_sub_items = computed(() => { if (!navbar) return []; return navbar.navbar_items.find((ni) => ni.URL == params?.[0])?.navbar_sub_items; }); </script>