81 lines
2.2 KiB
Vue
81 lines
2.2 KiB
Vue
<template>
|
|
<div ref="stickyWatch" />
|
|
<header ref="header" class="Header">
|
|
<div ref="headerWrapper" class="wrapper z-0">
|
|
<strong>
|
|
<Icon class="logo" name="wf:logo" mode="svg" size="40px" />
|
|
webfussel
|
|
</strong>
|
|
<input id="navToggle" v-model="isBurgerOpen" type="checkbox">
|
|
<label :aria-label="burgerLabel" for="navToggle">
|
|
<span/><span/><span/><span/>
|
|
</label>
|
|
<nav>
|
|
<ul class="main-nav">
|
|
<li v-for="({label, to, aria, icon}) in nav" :key="label" @click="isBurgerOpen = false">
|
|
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
|
|
<Icon :name="`ph:${icon}-duotone`" mode="svg" />
|
|
{{ label }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
let observer: IntersectionObserver
|
|
const header = ref<HTMLElement | null>(null)
|
|
const headerWrapper = ref<HTMLElement | null>(null)
|
|
const stickyWatch = ref<HTMLElement | null>(null)
|
|
|
|
const isBurgerOpen = ref<boolean>(false)
|
|
const burgerOpenLabel = 'Burgermenü öffnen'
|
|
const burgerCloseLabel = 'Burgermenü schließen'
|
|
const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burgerOpenLabel)
|
|
|
|
const nav = [
|
|
{
|
|
to: `/`,
|
|
label: 'Home',
|
|
icon: 'house',
|
|
'aria-label': 'Link dieser Seite: Startseite'
|
|
},
|
|
{
|
|
to: `/services`,
|
|
label: 'Leistungen',
|
|
icon: 'coins',
|
|
aria: 'Link dieser Seite: Preise'
|
|
},
|
|
{
|
|
to: `/references`,
|
|
label: 'Referenzen',
|
|
icon: 'at',
|
|
aria: 'Link dieser Seite: Referenzen'
|
|
},
|
|
{
|
|
to: `/contact`,
|
|
label: 'Kontakt',
|
|
icon: 'chats-circle',
|
|
aria: 'Link dieser Seite: Kontakt'
|
|
},
|
|
]
|
|
|
|
onMounted(() => {
|
|
observer = new IntersectionObserver(([entry]) => {
|
|
if (!entry) return
|
|
const { isIntersecting } = entry
|
|
header.value?.classList.toggle('sticks', !isIntersecting)
|
|
headerWrapper.value?.classList.toggle('z-4', !isIntersecting)
|
|
headerWrapper.value?.classList.toggle('z-0', isIntersecting)
|
|
}, {
|
|
rootMargin: '3% 0px 0px 0px'
|
|
})
|
|
observer.observe(stickyWatch.value!)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
observer.disconnect()
|
|
})
|
|
</script>
|