FIX: some fixes for rollout

Burger

app/components/Burger.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="Burger" :class="{ open }">
+    <nav class="z-4" ref="nav">
+      <ul>
+        <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" @click="close">
+            <Icon :name="icon" mode="svg" />
+            {{ label }}
+          </NuxtLink>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { navigation } from '../utils/navigation'
+
+const navElement = useTemplateRef('nav')
+
+const nav = useNavigation()
+const close = () => nav.hideNavigation()
+const open = computed(() => nav.isNavigationVisible.value)
+
+onClickOutside(navElement, close)
+</script>

app/components/Header.vue

@@ -8,15 +8,14 @@
           webfussel
         </strong>
       </NuxtLink>
-      <input id="navToggle" v-model="isBurgerOpen" type="checkbox">
-      <label :aria-label="burgerLabel" for="navToggle">
-        <span/><span/><span/><span/>
-      </label>
+      <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 nav" :key="label" @click="isBurgerOpen = false">
+          <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="`ph:${icon}-duotone`" mode="svg" />
+              <Icon :name="icon" mode="svg" />
               {{ label }}
             </NuxtLink>
           </li>
@@ -27,42 +26,17 @@
 </template>
 
 <script lang="ts" setup>
+import { navigation } from '../utils/navigation'
+
 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 nav = useNavigation()
 const burgerOpenLabel = 'Burgermenü öffnen'
 const burgerCloseLabel = 'Burgermenü schließen'
-const burgerLabel = computed(() => isBurgerOpen.value ? burgerCloseLabel : burgerOpenLabel)
-
-const nav = [
-  {
-    to: `/booking`,
-    label: 'Projektbuchung',
-    icon: 'calendar-check',
-    aria: 'Link dieser Seite: Preise'
-  },
-  {
-    to: `/flatrate`,
-    label: 'Flatrate',
-    icon: 'piggy-bank',
-    aria: 'Link dieser Seite: Preise'
-  },
-  {
-    to: `/references`,
-    label: 'Referenzen',
-    icon: 'sparkle',
-    aria: 'Link dieser Seite: Referenzen'
-  },
-  {
-    to: `/contact`,
-    label: 'Kontakt',
-    icon: 'chats-circle',
-    aria: 'Link dieser Seite: Kontakt'
-  },
-]
+const burgerLabel = computed(() => nav.isNavigationVisible.value ? burgerCloseLabel : burgerOpenLabel)
 
 onMounted(() => {
   observer = new IntersectionObserver(([entry]) => {