44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<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> |