modular locale menu

src/components/LocaleMenu.vue

+<template>
+
+                <v-list subheader max-width="250">
+
+                <v-subheader>{{$t("settings.locale")}}</v-subheader>
+                <v-select rounded 
+                          v-model="updateLocale"
+                          prepend-inner-icon="language"
+                          outlined
+                          :items="locales"
+                          dense>
+                    </v-select>
+                </v-list>
+    
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}],
+            localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"},
+        }
+        
+    },
+    computed: {
+        updateLocale: {
+            get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}}, 
+            set(value) {
+                this.$store.commit("setLocale", {value: value, i18n: this._i18n})
+                }
+        }
+    },
+}
+</script>
\ No newline at end of file

src/components/Menu.vue

@@ -18,17 +18,7 @@
                   <v-subheader>Hjelp og informasjon</v-subheader>
                 <v-btn text to="/om">Om ordbøkene<v-icon>chevron_right</v-icon></v-btn>
                 </v-list>
-                <v-list subheader max-width="250">
-
-                <v-subheader>{{$t("settings.locale")}}</v-subheader>
-                <v-select rounded 
-                          v-model="updateLocale"
-                          prepend-inner-icon="language"
-                          outlined
-                          :items="locales"
-                          dense>
-                    </v-select>
-                </v-list>
+                <LocaleMenu/>
                 <Settings/>
 
             </v-card-text>
@@ -43,29 +33,13 @@
 
 <script>
 import Settings from './Settings.vue'
+import LocaleMenu from './LocaleMenu.vue'
 
 export default {
     name: "Menu",
-    props: {
-      activatorClass: null
-
-    },
-    data () {
-        return {
-            locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}],
-            localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"},
-        }
-    },
-    computed: {
-        updateLocale: {
-            get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}}, 
-            set(value) {
-                this.$store.commit("setLocale", {value: value, i18n: this._i18n})
-                }
-        }
-    },
     components: {
-      Settings
+      Settings,
+      LocaleMenu
     }
 }
 </script>

src/components/TopBar.vue

@@ -4,14 +4,23 @@
       <v-spacer/>
       <v-toolbar-items class="hidden-sm-and-down">
       <v-divider vertical/>
-      <v-btn text width="210" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
+      <v-btn text width="210" v-if="false" :class="$vuetify.breakpoint.name"><v-icon left>language</v-icon>Norsk (Bokmål)<v-icon right>expand_more</v-icon></v-btn>
       <v-divider vertical/>
-      <v-btn text width="210"><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
+      <v-menu :close-on-content-click="false">
+          <template v-slot:activator= "{ on, attrs }">
+              <v-btn v-bind="attrs" v-on="on" text width="210"><v-icon left>settings</v-icon>Instillinger<v-icon right>expand_more</v-icon></v-btn>
+          </template>
+          <v-card>
+          <LocaleMenu/>
+          <Settings/>
+          </v-card>
+      
+      </v-menu>
             <v-divider vertical/>
       <v-btn text width="210" @click="toggleAbout"><v-icon left>{{$route.name=='about'? "chevron_left":"info"}}</v-icon>{{$route.name=='about'? "Tilbake":"Om ordbøkene"}}</v-btn>
       <v-divider vertical/>
       </v-toolbar-items>
-      <v-toolbar-items>
+      <v-toolbar-items v-if="$vuetify.breakpoint.mobile">
       <v-divider vertical/>     
         <v-dialog max-width="1200" width="1200" v-model="menuDialog" hide-overlay :fullscreen="$vuetify.breakpoint.mobile"
         :close-on-content-click="false" transition="dialog-top-transition">
@@ -29,6 +38,8 @@
 
 <script>
 import Menu from './Menu.vue'
+import Settings from './Settings.vue'
+import LocaleMenu from './LocaleMenu.vue'
 
 export default {
     name: "TopBar",
@@ -36,7 +47,7 @@ export default {
       return {
         version_label: process.env.VUE_APP_VERSION_LABEL,
         release: process.env.VUE_APP_RELEASE,
-        menuDialog: false
+        menuDialog: false,
       }
     },
     methods: {
@@ -45,7 +56,9 @@ export default {
       }
     },
     components: {
-        Menu
-    }
+        Menu,
+        Settings,
+        LocaleMenu
+    },
 }
-</script>
+</script>
\ No newline at end of file