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();