add: (WIP) category view

Removed h1 from calculator, add preparation for category view

app/assets/styles/page.css

@@ -14,11 +14,27 @@
 }
 
 .filter-bar {
-    background: var(--color-lightest);
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
-    gap: 1rem;
     padding: var(--padding-default);
+
+    & .box {
+        display: flex;
+        flex-direction: column;
+        gap: .5rem;
+
+        & strong {
+            color: var(--color-darkest);
+            font-size: .8rem;
+        }
+
+        & > div {
+            background: var(--color-lightest);
+            display: flex;
+            justify-content: flex-end;
+            gap: .5rem;
+        }
+    }
 }
 
 .search-bar {

app/pages/index.vue

@@ -13,20 +13,32 @@
           @update="updateCard()"
       />
       <section class="content flex-col">
-        <div class="content-text">
-          <h1>Mit ProPapier Preise vergleichen und sparen</h1>
-        </div>
         <aside class="filter-bar">
-          <PpFormDropDown
+          <div class="box">
-            :elements="sortElements"
+            <strong>Kategorie:</strong>
-            :current="currentSortElement!"
+            <div>
-            @click="setSortElement"
+              <PpFormDropDown
-          />
+                :elements="sortElements"
-          <PpFormToggleButton
+                :current="currentSortElement!"
-            :icons="['pp:sort-desc', 'pp:sort-asc']"
+                @click="setSortElement"
-            :current="currentSortDirection"
+              />
-            @click="countSortDirection"
+            </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