From 028ff0502071b4d1402b08ec366bd301a3a0bcc2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 7 Nov 2024 17:03:21 +0100
Subject: [PATCH] Add missing settings link

Resolves VBV-442 #complete
---
 .../components/header/AccountMenuContent.vue   | 16 +++++++++++++---
 client/src/components/header/MobileMenu.vue    | 18 ++++++++++++------
 client/src/router/index.ts                     |  2 ++
 client/src/router/names.ts                     |  1 +
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/client/src/components/header/AccountMenuContent.vue b/client/src/components/header/AccountMenuContent.vue
index f7a47b42..d06d16f7 100644
--- a/client/src/components/header/AccountMenuContent.vue
+++ b/client/src/components/header/AccountMenuContent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { SETTINGS_ROUTE } from "@/router/names";
 import type { User } from "@/stores/user";
 import { useRouter } from "vue-router";
 
@@ -14,10 +15,14 @@ async function navigate(routeName: string) {
   await router.push({ name: routeName });
   emit("close");
 }
+
+const settingsRoute = {
+  name: SETTINGS_ROUTE,
+};
 </script>
 
 <template>
-  <div class="text-black">
+  <div class="flex flex-col gap-4 text-black">
     <div class="border-b py-4">
       <div class="flex justify-start">
         <div v-if="user.avatar_url">
@@ -37,14 +42,19 @@ async function navigate(routeName: string) {
       </div>
     </div>
 
+    <router-link class="flex items-center gap-2" :to="settingsRoute">
+      <it-icon-settings />
+      {{ $t("a.Einstellungen") }}
+    </router-link>
+
     <button
       type="button"
-      class="mt-6 flex items-center"
+      class="flex items-center gap-2"
       data-cy="logout-button"
       @click="emit('logout')"
     >
       <it-icon-logout class="inline-block" />
-      <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
+      <span>{{ $t("mainNavigation.logout") }}</span>
     </button>
   </div>
 </template>
diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 0e44f74c..5583d87e 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
 import { useVVByLink } from "@/composables";
+import { SETTINGS_ROUTE } from "@/router/names";
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { User } from "@/stores/user";
 import type { CourseSession } from "@/types";
@@ -49,6 +50,10 @@ const mentorTabTitle = computed(() =>
     ? "a.Praxisbildner"
     : "a.Lernbegleitung"
 );
+
+const settingsRoute = {
+  name: SETTINGS_ROUTE,
+};
 </script>
 
 <template>
@@ -171,15 +176,16 @@ const mentorTabTitle = computed(() =>
               </li>
             </ul>
           </div>
-          <button
+          <router-link
+            :to="settingsRoute"
+            class="mt-6 flex w-full items-center gap-2 px-4 py-2"
+            active-class="bg-gray-200 text-blue-900 font-bold"
             v-if="user?.loggedIn"
             type="button"
-            class="mt-6 flex items-center px-4 py-2"
           >
-            <!-- todo: correct action / route -->
-            <it-icon-settings class="inline-block" />
-            <span class="ml-1">{{ $t("a.Einstellungen") }}</span>
-          </button>
+            <it-icon-settings />
+            {{ $t("a.Einstellungen") }}
+          </router-link>
           <button
             v-if="user?.loggedIn"
             type="button"
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 9e6af33f..a2118426 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -18,6 +18,7 @@ import {
   COMPETENCE_ROUTE,
   COMPETENCES_ROUTE,
   SELF_EVALUATION_ROUTE,
+  SETTINGS_ROUTE,
 } from "./names";
 
 const router = createRouter({
@@ -402,6 +403,7 @@ const router = createRouter({
     },
     {
       path: "/settings",
+      name: SETTINGS_ROUTE,
       component: () => import("@/pages/SettingsPage.vue"),
     },
     {
diff --git a/client/src/router/names.ts b/client/src/router/names.ts
index 8e41a5c0..a8f5d4f3 100644
--- a/client/src/router/names.ts
+++ b/client/src/router/names.ts
@@ -2,3 +2,4 @@ export const COMPETENCE_ROUTE = "competence";
 export const CERTIFICATES_ROUTE = "certificates";
 export const SELF_EVALUATION_ROUTE = "selfEvaluationAndFeedback";
 export const COMPETENCES_ROUTE = "competences";
+export const SETTINGS_ROUTE = "settings";