Refactored search and autocomplete

Now with more icons, much simpler dropdown and a smooth open animation.
Filter is moved to the searchPage instead of baking in the search
dropdown.

src/components/ui/ToggleButton.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="toggle-container">
-    <button v-for="option in options" class="toggle-button" @click="toggle(option)"
+    <button
+      v-for="option in options"
+      class="toggle-button"
+      @click="toggle(option)"
       :class="toggleValue === option ? 'selected' : null"
-    >{{ option }}</button>
+    >
+      {{ option }}
+    </button>
   </div>
 </template>
 
-
 <script>
-export default {
+export default {
   props: {
     options: {
       Array,
@@ -23,22 +27,20 @@ export default {
   data() {
     return {
       toggleValue: this.selected || this.options[0]
-    }
-  },
-  beforeMount() {
-    this.toggle(this.toggleValue)
+    };
   },
   methods: {
     toggle(toggleValue) {
       this.toggleValue = toggleValue;
       if (this.selected !== undefined) {
-        this.$emit('update:selected', toggleValue)
+        this.$emit("update:selected", toggleValue);
+        this.$emit("change", toggleValue);
       } else {
-        this.$emit('change', toggleValue)
+        this.$emit("change", toggleValue);
       }
     }
-  },
-}
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +56,6 @@ $background-selected: $background-color-secondary;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  // padding: 0.2rem;
   background-color: $background;
   border: 2px solid $background;
   border-radius: 8px;
@@ -65,36 +66,18 @@ $background-selected: $background-color-secondary;
     font-size: 1rem;
     line-height: 1rem;
     font-weight: normal;
-    width: 100%;
-    padding: 0.5rem 0;
+    padding: 0.5rem;
     border: 0;
     color: $text-color;
-    // background-color: $text-color-5;
     background-color: $background;
     text-transform: capitalize;
+    cursor: pointer;
 
     &.selected {
       color: $text-color;
-      // background-color: $background-color-secondary;
       background-color: $background-selected;
       border-radius: 8px;
     }
-
-    // &:first-of-type, &:last-of-type {
-    //   border-left: 4px solid $background;
-    //   border-right: 4px solid $background;
-    // }
-
-
-    // &:first-of-type {
-    //   border-top-left-radius: 4px;
-    //   border-bottom-left-radius: 4px;
-    // }
-
-    // &:last-of-type {
-    //   border-top-right-radius: 4px;
-    //   border-bottom-right-radius: 4px;
-    // }
   }
 }
-</style>
+</style>