rework search menu

src/components/SearchToolbar.vue

 <template>
     <v-card rounded="xl">
-        <v-container fluid>
+        <v-container fluid v-if="expanded || $vuetify.breakpoint.mdAndUp">
           <v-row >
           <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
-            <v-select  
+            <v-autocomplete  
+
+                auto-select-first
+                
                 v-model="$parent.pos_selected"
                 hide-details
                 :menu-props="{ offsetY: true }"
                 :dense="$vuetify.breakpoint.smAndDown"
-                label="Avgrens etter ordklasse"
+                label="Ordklasse"
                 :items="pos_items"
                 append-icon="expand_more"
                 @input="updatePos">
-          </v-select>
+            </v-autocomplete>
           </v-col>
           <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
-            <v-select  
-                v-model="$parent.scope"
-                hide-details
-                :menu-props="{ offsetY: true }"
+            <v-checkbox  
+                v-model="inflected_results"
                 :dense="$vuetify.breakpoint.smAndDown"
-                label="Søk i"
-                :items="scope_items"
-                append-icon="expand_more"
-                @input="updateScope">
-          </v-select>
+                label="Vis bøyde former"/>
+
           </v-col>
-          </v-row>
+          <v-col :cols="$vuetify.breakpoint.smAndDown ? 12 : 3">
+
+            <v-checkbox
+                v-model="fulltext"
+                :dense="$vuetify.breakpoint.smAndDown"
+                label="Fulltekstsøk"/>
+          </v-col>
+           </v-row>
+         
         </v-container>
+        <v-btn v-if="$vuetify.breakpoint.smAndDown"
+          class="search_options"
+      
+           text
+           
+           @click="expanded=!expanded">
+           <v-icon>{{expanded ? 'expand_less': 'filter_alt'}}</v-icon>{{expanded? '' : 'Søkealternativer'}}</v-btn>
         </v-card>
      
 </template>
@@ -36,9 +49,41 @@
 
 export default {
     name: "SearchToolbar",
+    data: function() {
+      return {
+        expanded: false
+
+      }
+    },
     computed: {
+      inflected_results: {
+        get() {
+          return this.$parent.scope.includes("b")
+        },
+        set() {
+          if (this.$parent.scope.includes("b")) {
+            this.$emit('updateScope', this.$parent.scope.replace("b",""))
+          }
+          else {
+            this.$emit('updateScope', this.$parent.scope + "b")
+          }
+        }
+      },
+      fulltext: {
+        get() {
+          return this.$parent.scope.includes("x")
+        },
+        set() {
+          if (this.$parent.scope.includes("x")) {
+            this.$emit('updateScope', this.$parent.scope.replace("x",""))
+          }
+          else {
+            this.$emit('updateScope', this.$parent.scope + "x")
+          }
+        }
+      },
       pos_items: function() {
-        return  ["ALL", "NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
+        return  ["NOUN", "PRON","DET","ADJ","CCONJ","SCONJ", "ADV", "VERB", "INTJ"].map(text =>{
           return {text: this.$t("pos." + text ), value: text}
         })
       },
@@ -49,11 +94,12 @@ export default {
       }
     },
     methods: {
-      updatePos (pos) {
-        this.$emit('updatePos', pos)
+      reset (pos) {
+        this.$emit('updatePos', "ALL")
+        this.$emit('updateScope', "wb")
       },
-      updateScope (scope) {
-        this.$emit('updateScope', scope)
+      updatePos (pos) {
+        this.$emit('updatePos', pos || 'ALL')
       }
   }
 }
@@ -62,7 +108,7 @@ export default {
 <style scoped>
 
 .v-card {
-  padding-top: 0px !important;
+  padding-top: 10px !important;
   padding-left: 24px !important;
   padding-right: 24px !important;
   padding-bottom: 10px !important;
@@ -71,6 +117,13 @@ export default {
   margin-left: 10px;
 }
 
+.search_options {
+    justify-content: center;
+
+    padding-right: 24px !important;
+    width: 100%;
+}
+
 
 </style>