resolves #29

src/components/AppHeader.vue

@@ -10,28 +10,9 @@
             <router-link to="/">{{ l.playground }}</router-link>
         </v-app-bar-title>
         <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
-        <v-dialog max-width="480">
-            <template v-slot:activator="{ props }">
-                <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
-            </template>
-            <template v-slot:default="{ isActive }">
-                <v-card class="pa-3" :title="user? l.profile : l.signin ">
-                    <v-card-text>
-                        <Profile v-if="user"></Profile>
-                        <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
-                    </v-card-text>
-                </v-card>
-            </template>
-        </v-dialog >
+        <CommonHeader></CommonHeader>
     </v-app-bar>
 </template>
 
-<script setup>
-import { useTheme } from 'vuetify'
-import Profile from './User/Profile.vue';
-const theme = useTheme()
-
-function toggleTheme () {
-  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-}
+<script>
 </script>

src/components/CommonHeader.vue

@@ -0,0 +1,44 @@
+<template>
+    <v-btn icon="mdi-theme-light-dark" @click="toggleTheme" v-tooltip="l.darkMode"></v-btn>
+    <v-btn-toggle @update:model-value="changeLang" density="compact" v-model="lang" mandatory rounded="xl" color="white" variant="flat" v-show="langOpts">
+        <v-btn size="small" value="bg">BG</v-btn>
+        <v-btn size="small" value="en">EN</v-btn>
+    </v-btn-toggle>
+    <v-btn icon="mdi-translate" @click="langOpts = !langOpts"></v-btn>
+    <v-dialog max-width="480">
+        <template v-slot:activator="{ props }">
+            <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
+        </template>
+        <template v-slot:default="{ isActive }">
+            <v-card class="pa-3" :title="user ? l.profile : l.signin">
+                <v-card-text>
+                    <Profile v-if="user"></Profile>
+                    <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
+                </v-card-text>
+            </v-card>
+        </template>
+    </v-dialog>
+</template>
+
+<script>
+import { useTheme } from 'vuetify'
+export default {
+    data() {
+        return {
+            langOpts:false
+        }
+    },
+    created() {
+        this.theme = useTheme()
+    },
+    methods: {
+        toggleTheme() {
+            this.store.prefs.ui.theme = this.store.prefs.ui.theme == 'dark' ? 'light' : 'dark';
+            this.theme.change(this.store.prefs.ui.theme);
+        },
+        changeLang(v) {
+            this.store.prefs.ui.lang = v;
+        }
+    }
+}
+</script>

src/components/ConsoleHeader.vue

@@ -38,23 +38,8 @@
 
         </v-list>
         <v-divider></v-divider>
-        <v-list nav>
-            <v-list-item @click="toggleTheme" prepend-icon="mdi-theme-light-dark" :title="l.darkMode"></v-list-item>
-            <v-list-item prepend-icon="mdi-translate">
-                <v-btn-toggle density="compact" v-model="lang" rounded="xl" color="white" variant="outlined">
-                    <v-btn size="small" value="bg">BG</v-btn>
-                    <v-btn size="small" value="en">EN</v-btn>
-                </v-btn-toggle>
-            </v-list-item>
-        </v-list>
     </v-navigation-drawer>
 </template>
 
-<script setup>
-import { useTheme } from 'vuetify'
-const theme = useTheme()
-
-function toggleTheme() {
-    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-}
+<script>
 </script>