resolves #29

2026-02-08 09:20:54 +02:00
parent e6a23b542b
commit 15a97ade7e
5 changed files with 56 additions and 37 deletions
@@ -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>