chore(navbar): added language switcher

public/icon-globe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>

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.mainStore.changeLocale(storageLang as AppLocale);
-        this.$i18n.locale = storageLang;
         return;
       }
 
@@ -56,8 +55,7 @@ export default defineComponent({
       const naviLanguage = window.navigator.language.toString();
 
       if (!naviLanguage.startsWith('pl')) {
-        this.mainStore.locale = 'en';
+        this.mainStore.changeLocale('en');
-        this.$i18n.locale = 'en';
         return;
       }
     }

src/components/Navbar.vue

@@ -1,9 +1,16 @@
 <template>
   <nav class="navbar">
     <div class="navbar-body">
-      <router-link class="brand" to="/">
+      <router-link class="brand-link" to="/">
         Pragotron TD2 <span class="text--accent">v{{ version }}</span> <sup>by Spythere</sup>
       </router-link>
+
+      <div class="lang-switcher">
+        <button @click="switchLanguage">
+          <img src="/icon-globe.svg" alt="globe icon" />
+          {{ store.locale.toUpperCase() == 'PL' ? 'POL' : 'ENG' }}
+        </button>
+      </div>
     </div>
   </nav>
 </template>
@@ -20,6 +27,11 @@ export default defineComponent({
     return {
       store: useMainStore()
     };
+  },
+  methods: {
+    switchLanguage() {
+      this.store.changeLocale(this.store.locale == 'pl' ? 'en' : 'pl');
+    }
   }
 });
 </script>
@@ -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;
+}
 </style>

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