1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 07:39:41 +02:00

Enable localization based on browser settings, add language selector (#925)

* Enable localization based on browser settings, add language selector

* Add dialog for language selection
This commit is contained in:
Philipp Fischbeck 2022-03-19 22:27:40 +01:00 committed by GitHub
parent 8f569509bf
commit 022cbd1616
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 225 additions and 5 deletions

View file

@ -36,6 +36,15 @@
</v-list>
</v-menu>
<template #bottom>
<v-list-item @click.stop="languageDialog = true">
<v-list-item-icon>
<v-icon>{{ $globals.icons.translate }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ $t('sidebar.language') }}</v-list-item-title>
<LanguageDialog v-model="languageDialog" />
</v-list-item-content>
</v-list-item>
<v-list-item @click="toggleDark">
<v-list-item-icon>
<v-icon>
@ -64,12 +73,13 @@
import { computed, defineComponent, onMounted, ref, useContext } from "@nuxtjs/composition-api";
import AppHeader from "@/components/Layout/AppHeader.vue";
import AppSidebar from "@/components/Layout/AppSidebar.vue";
import LanguageDialog from "~/components/global/LanguageDialog.vue";
import TheSnackbar from "@/components/Layout/TheSnackbar.vue";
import { useCookbooks } from "~/composables/use-group-cookbooks";
import { useToggleDarkMode } from "~/composables/use-utils";
export default defineComponent({
components: { AppHeader, AppSidebar, TheSnackbar },
components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
middleware: "auth",
setup() {
const { cookbooks } = useCookbooks();
@ -79,6 +89,8 @@ export default defineComponent({
const toggleDark = useToggleDarkMode();
const languageDialog = ref<boolean>(false);
const sidebar = ref<boolean | null>(null);
onMounted(() => {
@ -95,7 +107,7 @@ export default defineComponent({
};
});
});
return { cookbookLinks, isAdmin, toggleDark, sidebar };
return { cookbookLinks, isAdmin, languageDialog, toggleDark, sidebar };
},
data() {
return {