add: data from MongoDB

Retrieve Data from MongoDB

app/components/Pp/Header.vue

@@ -6,26 +6,51 @@
     <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
-    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
-    <nav class="flex-col" v-if="available">
+    <input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
+    <nav class="flex-col">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
       <ul class="flex-col">
-        <li>Home</li>
-        <li>Übersicht</li>
+        <li v-for="navPoint in navPoints" :key="navPoint.label">
+          <NuxtLink
+            :to="navPoint.to"
+            active-class="active"
+            @click="closeNav()"
+          >
+            {{ navPoint.label }}
+          </NuxtLink>
+        </li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
-const available = false
+type NavPoint = {
+  label: string
+  to: string
+}
+
+const navPoints = useState<NavPoint[]>('nav', () => ([
+  {
+    label: 'Home',
+    to: '/',
+  },
+  {
+    label: 'Übersicht',
+    to: '/overview',
+  },
+]))
+
+const cb = useTemplateRef('checkbox')
+const closeNav = () => { cb.value!.checked = false }
+
 </script>
 
 <style scoped>
   header a {
     text-decoration: none;
-    color: var(--color-black);
+    color: var(--color-darkest);
   }
 </style>