feat:#60 added switch button (not working)

frontend/src/components/LocaleSwitcher.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import i18n, { supportedLocales } from "../i18n";
+import { Ref, ref } from "vue";
+import router from "../router";
+import { useI18n } from "vue-i18n";
+
+const locales = ref(
+  Object.keys(supportedLocales).map((code) => ({
+    code,
+    name: supportedLocales[code].name,
+  })),
+);
+
+// selectedLocal is the string of the selected locale from i18n matched with the locales array
+const selectedLocale: Ref<any> = ref();
+
+const i18n1 = (i18n.vueI18n);
+
+function onLocaleChange() {
+  const newLocale: string = selectedLocale.value.code;
+
+  // If the selected locale is the same as the
+  // active one, do nothing
+  if (newLocale === i18n.vueI18n.global.locale) {
+    return;
+  }
+  i18n1.global.locale = newLocale;
+  router.push(`/${newLocale}`);
+}
+</script>
+<template>
+  <Dropdown
+    :options="locales"
+    optionLabel="name"
+    v-model="selectedLocale"
+    @change="onLocaleChange"
+  >
+  </Dropdown>
+</template>

frontend/src/components/MenuBar.vue

@@ -1,45 +1,59 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-const {t} = useI18n({})
+import LocaleSwitcher from "./LocaleSwitcher.vue";
+import i18n from "../i18n";
+
+const { t, locale } = useI18n();
+
+console.debug("locale", locale);
+console.debug(useI18n().locale)
 
 const items = ref([
   {
-    label: t('createCalendar'),
+    label: t("createCalendar"),
     icon: "pi pi-fw pi-plus",
-    url: "/",
+    url: `/${locale}`,
   },
   {
-    label: t('editCalendar'),
+    label: t("editCalendar"),
     icon: "pi pi-fw pi-pencil",
-    url: "/edit",
+    url: `/${locale}/edit`,
   },
   {
-    label: t('roomFinder'),
+    label: t("roomFinder"),
     icon: "pi pi-fw pi-calendar",
-    url: "/rooms",
+    url: `/${locale}/rooms`,
   },
   {
-    label: t('faq'),
+    label: t("faq"),
     icon: "pi pi-fw pi-book",
-    url: "/faq",
+    url: `/${i18n.vueI18n.global.locale}/faq`,
   },
   {
-    label: t('imprint'),
+    label: t("imprint"),
     icon: "pi pi-fw pi-id-card",
-    url: "/imprint",
+    url: `/${i18n.vueI18n.global.locale}/imprint`,
   },
   {
-    label: t('privacy'),
-    url: "/privacy-policy",
+    label: t("privacy"),
     icon: "pi pi-fw pi-exclamation-triangle",
+    url: `/${i18n.vueI18n.global.locale}/privacy-policy`,
   },
 ]);
+
+function removeAllItems() {
+  items.value = [];
+}
 </script>
 
 <template>
   <Menubar :model="items" class="menubar justify-content-center">
     <template #start></template>
+    <template #end>
+      <LocaleSwitcher></LocaleSwitcher>
+      <Button @click="removeAllItems()"></Button>
+    </template>
   </Menubar>
 </template>
 
@@ -48,4 +62,4 @@ const items = ref([
   background-color: transparent;
   border: none;
 }
-</style>
+</style>