Ehrenamt/ff-webpage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 13 Packages Wiki Activity Actions

list and emphasize

Browse source
This commit is contained in:
Julian Krauser 2024-11-05 14:41:48 +01:00
parent af9e4557d1
commit f38f663608
12 changed files with 355 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

36
components/Header.vue
View file

@ -1,10 +1,35 @@
<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">
<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" :src="baseUrl + navbar.logo.url" />
<img class="h-16 w-fit min-w-fit" :src="baseUrl + navbar.logo.url" />
</NuxtLink>
<div class="self-stretch p-2.5 justify-center items-center gap-7 flex">
<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"
@ -19,7 +44,7 @@
<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"
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
@ -27,6 +52,7 @@
:key="sublink.id"
:to="`/${params?.[0]}/${sublink.URL}`"
:class="sublink.URL == params?.[1] && !params[2] ? 'active' : ''"
class="w-fit"
>
{{ sublink.name }}
</NuxtLink>
@ -46,6 +72,8 @@ 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;
});