diff --git a/public/icon-globe.svg b/public/icon-globe.svg new file mode 100644 index 0000000..eba0b9d --- /dev/null +++ b/public/icon-globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index 57477da..9467b1b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,7 +18,7 @@ import { defineComponent } from 'vue'; import packageInfo from '../package.json'; import { useApiStore } from './stores/apiStore'; import Navbar from './components/Navbar.vue'; -import { useMainStore } from './stores/mainStore'; +import { useMainStore, type AppLocale } from './stores/mainStore'; export default defineComponent({ components: { Navbar }, @@ -46,8 +46,7 @@ export default defineComponent({ const storageLang = window.localStorage.getItem('language'); if (storageLang) { - this.mainStore.locale = storageLang; - this.$i18n.locale = storageLang; + this.mainStore.changeLocale(storageLang as AppLocale); return; } @@ -56,8 +55,7 @@ export default defineComponent({ const naviLanguage = window.navigator.language.toString(); if (!naviLanguage.startsWith('pl')) { - this.mainStore.locale = 'en'; - this.$i18n.locale = 'en'; + this.mainStore.changeLocale('en'); return; } } diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue index 55d1518..3e8c1a2 100644 --- a/src/components/Navbar.vue +++ b/src/components/Navbar.vue @@ -1,9 +1,16 @@ @@ -20,6 +27,11 @@ export default defineComponent({ return { store: useMainStore() }; + }, + methods: { + switchLanguage() { + this.store.changeLocale(this.store.locale == 'pl' ? 'en' : 'pl'); + } } }); @@ -52,7 +64,17 @@ nav.navbar { font-weight: bold; } -.brand { +.brand-link { font-size: 1.25em; } + +.lang-switcher button { + display: flex; + align-items: center; + gap: 0.5em; + + padding: 0.25em 0.5em; + border-radius: 0.5em; + color: white; +} diff --git a/src/stores/mainStore.ts b/src/stores/mainStore.ts index 022de6f..b16c72d 100644 --- a/src/stores/mainStore.ts +++ b/src/stores/mainStore.ts @@ -1,6 +1,9 @@ import { defineStore } from 'pinia'; import { useApiStore } from './apiStore'; import type ISceneryData from '../typings/common'; +import i18n from '../i18n'; + +export type AppLocale = 'pl' | 'en'; export enum Region { PL1 = 'eu', @@ -31,10 +34,18 @@ export const useMainStore = defineStore('main', { }, selectedStationName: '', selectedCheckpointName: '', - locale: 'pl' + locale: 'pl' as AppLocale }; }, + actions: { + changeLocale(locale: AppLocale) { + this.locale = locale; + window.localStorage.setItem('language', locale); + i18n.global.locale.value = locale; + } + }, + getters: { selectedStation(state): ISceneryData | undefined { const apiStore = useApiStore();