Add navigation translations

client/src/components/MainNavigationBar.vue

@@ -11,6 +11,7 @@ import { useUserStore } from "@/stores/user";
 import type { DropdownListItem } from "@/types";
 import type { Component } from "vue";
 import { onMounted, reactive } from "vue";
+import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 
 type DropdownActions = "logout" | "settings";
@@ -25,6 +26,7 @@ const route = useRoute();
 const router = useRouter();
 const userStore = useUserStore();
 const appStore = useAppStore();
+const { t } = useI18n();
 const learningPathStore = useLearningPathStore();
 const state = reactive({ showMenu: false });
 
@@ -77,14 +79,14 @@ onMounted(() => {
 
 const profileDropdownData: DropdownListItem[] = [
   {
-    title: "Kontoeinstellungen",
+    title: t("mainNavigation.settings"),
     icon: IconSettings as Component,
     data: {
       action: "settings",
     },
   },
   {
-    title: "Abmelden",
+    title: t("mainNavigation.logout"),
     icon: IconLogout as Component,
     data: {
       action: "logout",
@@ -159,7 +161,7 @@ const profileDropdownData: DropdownListItem[] = [
               class="nav-item"
               :class="{ 'nav-item--active': isInRoutePath(['/learn']) }"
             >
-              Lernpfad
+              {{ $t("general.LearningPath") }}
             </router-link>
 
             <router-link
@@ -183,7 +185,7 @@ const profileDropdownData: DropdownListItem[] = [
               :class="{ 'nav-item--active': isInRoutePath(['/media']) }"
               data-cy="medialibrary-link"
             >
-              Mediathek
+              {{ $t("mediaLibrary.title") }}
             </router-link>
             <router-link
               to="/messages"

client/src/components/MobileMenu.vue

@@ -42,7 +42,7 @@ const clickLink = (to: string) => {
                 @click="clickLink('/profile')"
               >
                 <IconSettings class="inline-block" />
-                <span class="ml-3"> Kontoeinstellungen </span>
+                <span class="ml-3"> {{ $t("mainNavigation.settings") }} </span>
               </button>
             </div>
           </div>
@@ -53,7 +53,7 @@ const clickLink = (to: string) => {
             <ul class="mt-6">
               <li>
                 <button @click="clickLink(`/learn/versicherungsvermittlerin-lp`)">
-                  Lernpfad
+                  {{ $t("general.learningPath") }}
                 </button>
               </li>
               <li class="mt-6">
@@ -70,7 +70,7 @@ const clickLink = (to: string) => {
               <li>Shop</li>
               <li class="mt-6">
                 <button @click="clickLink(`/media/versicherungsvermittlerin-media`)">
-                  Mediathek
+                  {{ $t("mediaLibrary.title") }}
                 </button>
               </li>
             </ul>
@@ -82,7 +82,7 @@ const clickLink = (to: string) => {
             @click="userStore.handleLogout()"
           >
             <IconLogout class="inline-block" />
-            <span class="ml-1">Abmelden</span>
+            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
           </button>
         </div>
       </div>

client/src/locales/de.json

@@ -9,8 +9,13 @@
     "backCapitalized": "@.capitalize:general.back",
     "save": "Speichern",
     "learningUnit": "Lerneinheit",
+    "learningPath": "Lernpfad",
     "show": "Anschauen"
   },
+  "mainNavigation": {
+    "logout": "Abmelden",
+    "settings": "Kontoeinstellungen"
+  },
   "dashboard": {
     "welcome": "Willkommen, {name}"
   },