add: (WIP) category view

Removed h1 from calculator, add preparation for category view

app/assets/styles/page.css

@@ -14,11 +14,27 @@
 }
 
 .filter-bar {
+    display: flex;
+    justify-content: space-between;
+    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: 1rem;
+            gap: .5rem;
-    padding: var(--padding-default);
+        }
+    }
 }
 
 .search-bar {

app/pages/index.vue

@@ -13,10 +13,20 @@
           @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">
+            <strong>Kategorie:</strong>
+            <div>
+              <PpFormDropDown
+                :elements="sortElements"
+                :current="currentSortElement!"
+                @click="setSortElement"
+              />
+            </div>
+          </div>
+          <div class="box">
+            <strong>Preise Sortieren nach:</strong>
+            <div>
               <PpFormDropDown
                 :elements="sortElements"
                 :current="currentSortElement!"
@@ -27,6 +37,8 @@
                 :current="currentSortDirection"
                 @click="countSortDirection"
               />
+            </div>
+          </div>
         </aside>
         <div class="flex-col" role="list" v-if="cards.length">
           <PpPriceCard