FIX: Directories

Better directory structure

app/components/Section/Header.vue

@@ -0,0 +1,57 @@
+<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>