app/assets/icons/sort_asc.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%"
-    height="100%" viewBox="0 0 100 100"
-    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    xml:space="preserve"
-    xmlns:serif="http://www.serif.com/"
-    style="fill: currentColor">
-        <path d="M26.208,59.542l-1.208,1.25l-0,-31.625c-0,-2.286 -1.881,-4.167 -4.167,-4.167c-2.285,0 -4.166,1.881 -4.166,4.167l-0,31.625l-1.209,-1.25c-0.784,-0.785 -1.849,-1.226 -2.958,-1.226c-2.295,0 -4.184,1.889 -4.184,4.184c0,1.109 0.441,2.174 1.226,2.958l8.333,8.334c0.396,0.379 0.864,0.676 1.375,0.875c1.008,0.445 2.159,0.445 3.167,-0c0.511,-0.199 0.978,-0.496 1.375,-0.875l8.333,-8.334c0.784,-0.784 1.225,-1.849 1.225,-2.958c0,-2.295 -1.888,-4.184 -4.183,-4.184c-1.109,0 -2.174,0.441 -2.959,1.226m19.625,-26.209l12.5,0c2.286,0 4.167,-1.881 4.167,-4.166c-0,-2.286 -1.881,-4.167 -4.167,-4.167l-12.5,0c-2.285,0 -4.166,1.881 -4.166,4.167c-0,2.285 1.881,4.166 4.166,4.166m41.667,12.5l-41.667,0c-2.285,0 -4.166,1.881 -4.166,4.167c-0,2.286 1.881,4.167 4.166,4.167l25,-0c2.286,-0 4.167,-1.881 4.167,-4.167c-0,-2.286 -1.881,-4.167 -4.167,-4.167m16.667,20.834l-41.667,-0c-2.285,-0 -4.166,1.881 -4.166,4.166c-0,2.286 1.881,4.167 4.166,4.167l41.667,0c2.286,0 4.167,-1.881 4.167,-4.167c-0,-2.285 -1.881,-4.166 -4.167,-4.166"
-            style="fill: currentColor"/>
-</svg>

app/assets/icons/sort_desc.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M26.208,59.542l-1.208,1.25l-0,-31.625c-0,-2.286 -1.881,-4.167 -4.167,-4.167c-2.285,0 -4.166,1.881 -4.166,4.167l-0,31.625l-1.209,-1.25c-0.784,-0.785 -1.849,-1.226 -2.958,-1.226c-2.295,0 -4.184,1.889 -4.184,4.184c0,1.109 0.441,2.174 1.226,2.958l8.333,8.334c0.396,0.379 0.864,0.676 1.375,0.875c1.008,0.445 2.159,0.445 3.167,-0c0.511,-0.199 0.978,-0.496 1.375,-0.875l8.333,-8.334c0.784,-0.784 1.225,-1.849 1.225,-2.958c0,-2.295 -1.888,-4.184 -4.183,-4.184c-1.109,0 -2.174,0.441 -2.959,1.226m19.625,-26.209l41.667,0c2.286,0 4.167,-1.881 4.167,-4.166c-0,-2.286 -1.881,-4.167 -4.167,-4.167l-41.667,0c-2.285,0 -4.166,1.881 -4.166,4.167c-0,2.285 1.881,4.166 4.166,4.166m41.667,12.5l-41.667,0c-2.285,0 -4.166,1.881 -4.166,4.167c-0,2.286 1.881,4.167 4.166,4.167l25,-0c2.286,-0 4.167,-1.881 4.167,-4.167c-0,-2.286 -1.881,-4.167 -4.167,-4.167m16.667,20.834l-41.667,-0c-2.285,-0 -4.166,1.881 -4.166,4.166c-0,2.286 1.881,4.167 4.166,4.167l12.5,0c2.286,0 4.167,-1.881 4.167,-4.167c-0,-2.285 -1.881,-4.166 -4.167,-4.166" style="fill: currentColor"/></svg>

app/assets/styles/form/dropdown.css

@@ -1,64 +0,0 @@
-.DropDown {
-    --border-color: var(--color-light);
-    --label-color: var(--color-darkest);
-    --background-color: var(--color-lightest);
-    --arrow-color: var(--color-main-dark);
-
-    position: relative;
-
-    &.active {
-        --background-color: var(--color-main-dark);
-        --label-color: var(--color-lightest);
-        --arrow-color: var(--color-lightest);
-        --border-color: var(--color-main-dark);
-
-        & ul {
-            scale: 1 1;
-        }
-    }
-
-    & button {
-        all: unset;
-        cursor: pointer;
-        color: var(--label-color);
-        border: 1px solid var(--border-color);
-        border-radius: var(--radius-default);
-        background: var(--background-color);
-        padding: .5rem 1rem;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: .5rem;
-        transition: var(--transition-default);
-        width: 70px;
-
-        & .icon {
-            color: var(--arrow-color);
-        }
-    }
-
-    & ul {
-        position: absolute;
-        list-style: none;
-        transform-origin: top;
-        scale: 1 0;
-        transition: var(--transition-default);
-        color: var(--color-darkest);
-        border: 1px solid var(--color-main-dark);
-        border-radius: var(--radius-default);
-        background: var(--color-lightest);
-        box-shadow: var(--box-shadow-z2);
-        width: 100%;
-        z-index: 2000;
-        top: 0;
-
-        & li {
-            padding: .5rem 1rem;
-
-            &.selected {
-                background: var(--color-main-dark);
-                color: var(--color-lightest);
-            }
-        }
-    }
-}

app/assets/styles/form/togglebutton.css

@@ -1,14 +0,0 @@
-.ToggleButton {
-    all: unset;
-    color: var(--color-lightest);
-    background: var(--color-main-dark);
-    padding: .5rem .8rem;
-    border-radius: var(--radius-default);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    & .icon {
-        font-size: 1.2rem;
-    }
-}

app/assets/styles/page.css

@@ -14,25 +14,24 @@
 }
 
 .filter-bar {
+    background: var(--color-lightest);
     display: flex;
     justify-content: space-between;
     padding: var(--padding-default);
 
-    & .box {
+    & > button {
-        display: flex;
+        all: unset;
-        flex-direction: column;
+        cursor: pointer;
-        gap: .5rem;
+        color: var(--color-main-darkest);
+        font-weight: bolder;
+        font-family: 'Roboto', sans-serif;
 
-        & strong {
+        &.active {
-            color: var(--color-darkest);
+            color: var(--color-main-darkest);
-            font-size: .8rem;
         }
 
-        & > div {
+        &:not(.active) {
-            background: var(--color-lightest);
+            opacity: .5;
-            display: flex;
-            justify-content: flex-end;
-            gap: .5rem;
         }
     }
 }

app/assets/styles/priceCard.css

@@ -2,7 +2,7 @@
     position: relative;
     width: 100%;
     color: var(--color-darkest);
-    border-bottom: 1px dashed var(--color-light);
+    border-bottom: 1px solid var(--color-light);
 
     .bottom {
         position: absolute;

app/components/Pp/Form/DropDown.vue

@@ -1,45 +0,0 @@
-<template>
-  <div
-    class="DropDown"
-    :class="{ active }"
-    ref="dropdown"
-  >
-    <button @click="active = !active">
-      <span>{{ current.label }}</span>
-      <Icon class="icon" name="uil:angle-down" mode="svg" />
-    </button>
-    <ul>
-      <li
-        v-for="element in elements"
-        @click="click(element)"
-        :class="{ selected : element.value === current.value }"
-      >
-        {{ element.label }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { DropDownElement } from '../../../../shared/DropDown'
-
-type Props = {
-  elements : DropDownElement[]
-  current : DropDownElement
-}
-
-const { elements = [] } = defineProps<Props>()
-const emit = defineEmits(['click'])
-
-const active = ref(false)
-const dropdown = useTemplateRef<HTMLDivElement>('dropdown')
-
-const click = (element : DropDownElement) => {
-  emit('click', element)
-  active.value = false
-}
-
-onMounted(() => {
-  onClickOutside(dropdown, () => active.value = false)
-})
-</script>

app/components/Pp/Form/ToggleButton.vue

@@ -1,21 +0,0 @@
-<template>
-  <button class="ToggleButton" @click="click">
-    <Icon class="icon" :name="icons[current]!" mode="svg" />
-  </button>
-</template>
-
-<script setup lang="ts">
-type Props = {
-  icons : string[]
-  current: number
-}
-
-defineProps<Props>()
-const emit = defineEmits(['click'])
-
-const click = () => emit('click')
-</script>
-
-<style scoped>
-
-</style>

app/pages/index.vue

@@ -13,32 +13,13 @@
           @update="updateCard()"
       />
       <section class="content flex-col">
+        <div class="content-text">
+          <h1>Mit ProPapier Preise vergleichen und sparen</h1>
+        </div>
         <aside class="filter-bar">
-          <div class="box">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
-            <strong>Kategorie:</strong>
+            {{ button.label }}
-            <div>
+          </button>
-              <PpFormDropDown
-                :elements="sortElements"
-                :current="currentSortElement!"
-                @click="setSortElement"
-              />
-            </div>
-          </div>
-          <div class="box">
-            <strong>Preise Sortieren nach:</strong>
-            <div>
-              <PpFormDropDown
-                :elements="sortElements"
-                :current="currentSortElement!"
-                @click="setSortElement"
-              />
-              <PpFormToggleButton
-                :icons="['pp:sort-desc', 'pp:sort-asc']"
-                :current="currentSortDirection"
-                @click="countSortDirection"
-              />
-            </div>
-          </div>
         </aside>
         <div class="flex-col" role="list" v-if="cards.length">
           <PpPriceCard
@@ -71,37 +52,15 @@
 import type { Card } from '../../shared/Card'
 import type { Button } from '../../shared/ButtonGroup'
 import { PpPriceCardDialog, PpDeleteDialog, PpPriceCard } from '#components'
-import type { DropDownElement } from '../../shared/DropDown'
 
 const cards = useLocalStorage<Card[]>('cards', [])
 const currentSort = useLocalStorage<number>('sort', 0)
-const currentSortDirection = useLocalStorage<number>('sortDirection', 0)
 const currentCard = ref<Card>()
 const currentCardIndex = ref<number>(-1)
 const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
-const sortElements : DropDownElement[] = [
-  {
-    label: 'Rollen',
-    value: 0,
-  },
-  {
-    label: 'Blatt',
-    value: 1,
-  },
-  {
-    label: 'Lagen',
-    value: 2,
-  }
-]
-const currentSortElement = ref<DropDownElement>(sortElements[0]!)
-
-const setSortElement = (element : DropDownElement) => {
-  sort(element.value as number)
-}
-
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',
@@ -111,6 +70,7 @@ const createCard = (uuid : string) : Card => ({
   layers: '',
 })
 
+
 const addCard = (card : Card) => {
   cards.value.unshift({ ...card })
   sort()
@@ -151,23 +111,37 @@ const openDeleteModal = () => {
   deleteModal.value?.$el.showModal()
 }
 
+const filterButtons = ref<Button[]>([
+  {
+    label: 'Rollen',
+    icon: 'uil:toilet-paper',
+    active: currentSort.value === 0,
+  },
+  {
+    label: 'Blatt',
+    icon: 'uil:file-landscape',
+    active: currentSort.value === 1,
+  },
+  {
+    label: 'Lagen',
+    icon: 'uil:layer-group',
+    active: currentSort.value === 2,
+  },
+])
+
 const sortBy = (key : 'ppr' | 'pps' | 'ppl') => {
   cards.value.sort((a, b) => {
     const aCard = priceCards.value?.find(card => card.uuid === a.uuid) || null
     const bCard = priceCards.value?.find(card => card.uuid === b.uuid) || null
     if (!aCard || !bCard) return 0
-
-    if (currentSortDirection.value === 0) {
-      return bCard[key] - aCard[key]
-    }
-
     return aCard[key] - bCard[key]
   })
 }
 
 const sort = async (index : number = currentSort.value) => {
   currentSort.value = index
-  currentSortElement.value = sortElements[index]!
+  filterButtons.value.forEach(button => { button.active = false })
+  filterButtons.value[index]!.active = true
 
   await nextTick()
 
@@ -177,12 +151,4 @@ const sort = async (index : number = currentSort.value) => {
     case 2: return sortBy('ppl')
   }
 }
-
-const countSortDirection = () => {
-  let newSortDirection = currentSortDirection.value + 1
-  if (newSortDirection > 1) newSortDirection = 0
-
-  currentSortDirection.value = newSortDirection
-  sort()
-}
 </script>

nuxt.config.ts

@@ -54,27 +54,11 @@ export default defineNuxtConfig({
     './app/assets/styles/priceCard.css',
     './app/assets/styles/form/textfield.css',
     './app/assets/styles/form/search.css',
-    './app/assets/styles/form/dropdown.css',
-    './app/assets/styles/form/togglebutton.css',
     './app/assets/styles/toolbar.css',
     './app/assets/styles/page.css',
     './app/assets/styles/dialog.css',
   ],
 
-  icon: {
-    customCollections: [
-      {
-        prefix: 'pp',
-        dir: './app/assets/icons'
-      }
-    ],
-    provider: 'iconify',
-    serverBundle: 'local',
-    clientBundle: {
-      scan: true,
-    },
-  },
-
   site: {
     url: 'https://pro-papier.de',
     name: 'ProPapier',

shared/DropDown.ts

@@ -1,4 +0,0 @@
-export type DropDownElement = {
-  label: string
-  value: string | number
-}