80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
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 baseUrl = useStrapiUrl().replace("/api", "");
|
|
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>
|