57 lines
1.8 KiB
Vue
Executable file
57 lines
1.8 KiB
Vue
Executable file
<template>
|
|
<div ref="stickyWatch" />
|
|
<header ref="header" class="Header">
|
|
<div ref="headerWrapper" class="wrapper z-0">
|
|
<NuxtLink to="/" aria-label="Link zur Startseite">
|
|
<strong>
|
|
<Icon class="logo" name="wf:logo" mode="svg" size="40px" />
|
|
webfussel
|
|
</strong>
|
|
</NuxtLink>
|
|
<button class="burger" :aria-label="burgerLabel" @click="() => nav.toggleNavigation()">
|
|
<Icon name="ph:waves" mode="svg" size="2em" />
|
|
</button>
|
|
<nav>
|
|
<ul class="main-nav">
|
|
<li v-for="({label, to, aria, icon}) in navigation" :key="label">
|
|
<NuxtLink :to="to" :aria-label="aria" active-class="active" class="inline-flex-row big-gap">
|
|
<Icon :name="icon" mode="svg" />
|
|
{{ label }}
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { navigation } from '~/utils/navigation'
|
|
|
|
let observer: IntersectionObserver
|
|
const header = useTemplateRef('header')
|
|
const headerWrapper = useTemplateRef('headerWrapper')
|
|
const stickyWatch = useTemplateRef('stickyWatch')
|
|
|
|
const nav = useNavigation()
|
|
const burgerOpenLabel = 'Burgermenü öffnen'
|
|
const burgerCloseLabel = 'Burgermenü schließen'
|
|
const burgerLabel = computed(() => nav.isNavigationVisible.value ? burgerCloseLabel : burgerOpenLabel)
|
|
|
|
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>
|