add: data from MongoDB

Retrieve Data from MongoDB

app/assets/styles/general.css

@@ -58,6 +58,7 @@ body {
     height: 100%;
     overflow-x: hidden;
     font-family: sans-serif;
+    color: var(--color-darkest);
 }
 
 .dot {

app/assets/styles/header.css

@@ -52,6 +52,17 @@
         align-items: center;
         & li {
             list-style: none;
+
+            & a {
+                color: var(--color-black);
+                text-decoration: none;
+                transition: var(--transition-default);
+
+                &.active {
+                    color: var(--color-main);
+                    font-weight: bold;
+                }
+            }
         }
     }
 }

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>

app/pages/overview.vue

@@ -0,0 +1,81 @@
+<template>
+  <section class="content flex-col">
+    <aside class="filter-bar">
+      <PpButtonGroup
+        :buttons="filterButtons"
+        @click="sort"
+      />
+    </aside>
+    <div class="pc-wrapper flex-col" role="list">
+      <p
+        v-for="product in products"
+        :key="product.sku"
+      >
+        {{ product.name }} - {{ product.price }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '../../shared/Card'
+import type { Button } from '../../shared/ButtonGroup'
+import type { Product } from '../../shared/db/Product'
+
+const currentSort = ref(0)
+
+const createCard = (uuid : string) : Card => ({
+  uuid,
+  name: '',
+  price: 0,
+  roles: 0,
+  sheets: 0,
+  layers: 0,
+  ppr: 0,
+  pps: 0,
+  ppl: 0,
+})
+
+const { data : products } = useFetch<Product[]>('/api/products')
+
+const cards = useState('cards', () => [
+  createCard(crypto.randomUUID()),
+])
+
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+  },
+])
+
+const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
+  cards.value.sort((a : Card, b : Card) => a[key] - b[key])
+}
+
+const sort = (index : number) => {
+  currentSort.value = index
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
+
+  switch (index) {
+    case 0:
+      sortBy('ppr')
+      break
+    case 1:
+      sortBy('pps')
+      break
+    case 2:
+      sortBy('ppl')
+      break
+  }
+}
+</script>