app/assets/styles/general.css

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

app/assets/styles/header.css

@@ -52,17 +52,6 @@
         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

@@ -3,54 +3,29 @@
     <NuxtLink to="/">
       <strong><span>Pro</span>Papier</strong>
     </NuxtLink>
-    <label for="burger_nav_toggle">
+    <label for="burger_nav_toggle" v-if="available">
       <Icon name="solar:hamburger-menu-broken" size="2em" />
     </label>
-    <input ref="checkbox" type="checkbox" id="burger_nav_toggle"/>
+    <input type="checkbox" id="burger_nav_toggle" v-if="available" />
-    <nav class="flex-col">
+    <nav class="flex-col" v-if="available">
       <label for="burger_nav_toggle">
         <Icon name="solar:close-circle-broken" />
       </label>
       <ul class="flex-col">
-        <li v-for="navPoint in navPoints" :key="navPoint.label">
+        <li>Home</li>
-          <NuxtLink
+        <li>Übersicht</li>
-            :to="navPoint.to"
-            active-class="active"
-            @click="closeNav()"
-          >
-            {{ navPoint.label }}
-          </NuxtLink>
-        </li>
       </ul>
     </nav>
   </header>
 </template>
 
 <script setup lang="ts">
-type NavPoint = {
+const available = false
-  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-darkest);
+    color: var(--color-black);
   }
 </style>

app/pages/overview.vue

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

nuxt.config.ts

@@ -22,12 +22,7 @@ export default defineNuxtConfig({
     '/privacy': { prerender: true },
   },
 
-  modules: [
+  modules: ['@nuxt/icon', '@vueuse/nuxt', '@nuxtjs/device'],
-    '@nuxt/icon',
-    '@vueuse/nuxt',
-    '@nuxtjs/device',
-    'nuxt-mongoose',
-  ],
 
   css : [
     './app/assets/styles/general.css',
@@ -38,12 +33,5 @@ export default defineNuxtConfig({
     './app/assets/styles/priceCard.css',
     './app/assets/styles/formInput.css',
     './app/assets/styles/toolbar.css',
-  ],
+  ]
-
-  mongoose: {
-    uri: `${process.env.MONGODB_URI}`,
-    modelsDir: 'models',
-    devtools: true,
-  },
-
 })

package.json

@@ -3,12 +3,12 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prepare": "nuxt prepare",
     "build": "nuxt build",
     "dev": "nuxt dev",
     "dev:expose": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "prepare": "nuxt prepare",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
@@ -18,7 +18,6 @@
     "@nuxtjs/device": "^3.2.4",
     "@vueuse/nuxt": "^13.1.0",
     "nuxt": "^3.16.2",
-    "nuxt-mongoose": "^1.0.6",
     "vue": "latest",
     "vue-router": "latest"
   }

server/api/products/index.get.ts

@@ -1,9 +0,0 @@
-export default defineEventHandler(async () => {
-  try {
-    return await ProductSchema.find()
-  } catch (error) {
-    console.error(error)
-    return []
-  }
-
-})

server/models/product.schema.ts

@@ -1,49 +0,0 @@
-import { defineMongooseModel } from '#nuxt/mongoose'
-
-export const ProductSchema = defineMongooseModel({
-  name: 'products',
-  schema: {
-    name: {
-      type: String,
-      required: true,
-    },
-    brand: {
-      type: String,
-      required: true,
-    },
-    image: {
-      type: String,
-      required: true,
-      unique: true,
-    },
-    market: {
-      type: String,
-      required: true,
-    },
-    category: {
-      type: String,
-      required: true,
-    },
-    sku: {
-      type: String,
-      required: true,
-      unique: true,
-    },
-    price: {
-      type: Number,
-      required: true,
-    },
-    pieces: {
-      type: Number,
-      required: true,
-    },
-    sheets: {
-      type: Number,
-      required: true,
-    },
-    layers: {
-      type: Number,
-      required: true,
-    },
-  }
-})

shared/db/Product.ts

@@ -1,12 +0,0 @@
-export type Product = {
-  name: string
-  brand: string
-  image: string
-  market: string
-  category: string
-  sku: string
-  price: number
-  pieces: number
-  sheets: number
-  layers: number
-}