From e5cbdc1620a4e1e3b2f405fce75b8de05c6afdff Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Sat, 26 Oct 2024 20:58:52 +0200
Subject: [PATCH] Add styling to active mobile navigation item

---
 client/src/components/header/MobileMenu.vue | 68 +++++++++++++--------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 010c8417..b70345bc 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -71,56 +71,74 @@ const mentorTabTitle = computed(() =>
         </div>
         <div>
           <div v-if="courseSession" class="mt-6 border-b">
-            <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
-            <ul class="mt-6">
+            <h4 class="px-4 text-sm text-gray-900">{{ courseSession.course.title }}</h4>
+            <ul class="mt-6 flex flex-col">
               <li v-if="hasCockpitMenu" class="mb-6">
-                <button
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-cockpit-link"
-                  @click="clickLink(getCockpitUrl(courseSession.course.slug))"
+                  :to="getCockpitUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("cockpit.title") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasPreviewMenu" class="mb-6">
-                <button
+              <li v-if="hasPreviewMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-preview-link"
-                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
+                  :to="getLearningPathUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("a.Vorschau Teilnehmer") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasLearningPathMenu" class="mb-6">
-                <button
+              <li v-if="hasLearningPathMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-learning-path-link"
-                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
+                  :to="getLearningPathUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("general.learningPath") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasCompetenceNaviMenu" class="mb-6">
-                <button
+              <li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-competence-profile-link"
-                  @click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
+                  :to="getCompetenceNaviUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("competences.title") }}
-                </button>
+                </router-link>
               </li>
-              <li v-if="hasLearningMentor" class="mb-6">
-                <button
+              <li v-if="hasLearningMentor" class="mb-2 flex">
+                <router-link
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-mentor-link"
-                  @click="clickLink(getLearningMentorUrl(courseSession.course.slug))"
+                  :to="getLearningMentorUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t(mentorTabTitle) }}
-                </button>
+                </router-link>
               </li>
 
-              <li v-if="hasMediaLibraryMenu" class="mb-6">
-                <button
+              <li v-if="hasMediaLibraryMenu" class="mb-2 flex">
+                <router-link
                   data-cy="medialibrary-link"
-                  @click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
+                  class="w-full px-4 py-2"
+                  active-class="bg-gray-200 text-blue-900 font-bold"
+                  :to="getMediaCenterUrl(courseSession.course.slug)"
+                  @click="$emit('closemodal')"
                 >
                   {{ $t("a.Mediathek") }}
-                </button>
+                </router-link>
               </li>
               <li
                 v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"