From 31db223661b2b391f1633598c4127650b2548bc5 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 18 Nov 2024 17:50:37 +0100
Subject: [PATCH] Fix styling of mobile menu

---
 client/src/components/header/MobileMenu.vue | 83 +++++++++++----------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index b797b191..97cd4e6a 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -61,9 +61,9 @@ const profileRoute = {
 
 <template>
   <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
-    <div>
+    <div class="-mx-4">
       <div>
-        <div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
+        <div v-if="user?.loggedIn" class="border-b px-8 pb-4">
           <div class="-ml-4 flex">
             <div v-if="user?.avatar_url">
               <img
@@ -78,8 +78,8 @@ const profileRoute = {
               <div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
               <router-link
                 :to="profileRoute"
-                @click="emit('closemodal')"
                 class="underline"
+                @click="emit('closemodal')"
               >
                 {{ $t("a.Profil anzeigen") }}
               </router-link>
@@ -87,12 +87,14 @@ const profileRoute = {
           </div>
         </div>
         <div>
-          <div v-if="courseSession" class="mt-6 border-b">
-            <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">
+          <div v-if="courseSession" class="border-b px-4 py-6">
+            <h4 class="mb-4 px-4 text-sm text-gray-900">
+              {{ courseSession.course.title }}
+            </h4>
+            <ul class="flex flex-col gap-2">
+              <li v-if="hasCockpitMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-cockpit-link"
                   :to="getCockpitUrl(courseSession.course.slug)"
@@ -101,9 +103,9 @@ const profileRoute = {
                   {{ $t("cockpit.title") }}
                 </router-link>
               </li>
-              <li v-if="hasPreviewMenu" class="mb-2 flex">
+              <li v-if="hasPreviewMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-preview-link"
                   :to="getLearningPathUrl(courseSession.course.slug)"
@@ -112,9 +114,9 @@ const profileRoute = {
                   {{ $t("a.Vorschau Teilnehmer") }}
                 </router-link>
               </li>
-              <li v-if="hasLearningPathMenu" class="mb-2 flex">
+              <li v-if="hasLearningPathMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-learning-path-link"
                   :to="getLearningPathUrl(courseSession.course.slug)"
@@ -123,9 +125,9 @@ const profileRoute = {
                   {{ $t("general.learningPath") }}
                 </router-link>
               </li>
-              <li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
+              <li v-if="hasCompetenceNaviMenu">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-competence-profile-link"
                   :to="getCompetenceNaviUrl(courseSession.course.slug)"
@@ -134,9 +136,9 @@ const profileRoute = {
                   {{ $t("competences.title") }}
                 </router-link>
               </li>
-              <li v-if="hasLearningMentor" class="mb-2 flex">
+              <li v-if="hasLearningMentor">
                 <router-link
-                  class="w-full px-4 py-2"
+                  class="block w-full px-4 py-2"
                   active-class="bg-gray-200 text-blue-900 font-bold"
                   data-cy="navigation-mobile-mentor-link"
                   :to="getLearningMentorUrl(courseSession.course.slug)"
@@ -159,9 +161,9 @@ const profileRoute = {
               </li>
             </ul>
           </div>
-          <div v-if="courseSession" class="mt-6 border-b">
-            <ul>
-              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+          <div v-if="courseSession" class="border-b px-4">
+            <ul class="flex flex-col gap-2 py-6">
+              <li v-if="courseSession && hasMediaLibraryMenu" class="flex">
                 <router-link
                   data-cy="medialibrary-link"
                   class="flex w-full items-center gap-2 px-4 py-2"
@@ -173,7 +175,7 @@ const profileRoute = {
                   {{ $t("a.Mediathek") }}
                 </router-link>
               </li>
-              <li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
+              <li v-if="courseSession && hasMediaLibraryMenu" class="flex">
                 <router-link
                   data-cy="calendar-link"
                   class="flex w-full items-center gap-2 px-4 py-2"
@@ -188,25 +190,28 @@ const profileRoute = {
               </li>
             </ul>
           </div>
-          <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"
-          >
-            <it-icon-settings />
-            {{ $t("a.Einstellungen") }}
-          </router-link>
-          <button
-            v-if="user?.loggedIn"
-            type="button"
-            class="mt-6 flex items-center px-4 py-2"
-            @click="$emit('logout')"
-          >
-            <it-icon-logout class="inline-block" />
-            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
-          </button>
+
+          <div class="flex flex-col gap-2 px-4 py-6">
+            <router-link
+              v-if="user?.loggedIn"
+              :to="settingsRoute"
+              class="flex w-full items-center gap-2 px-4 py-2"
+              active-class="bg-gray-200 text-blue-900 font-bold"
+              type="button"
+            >
+              <it-icon-settings />
+              {{ $t("a.Einstellungen") }}
+            </router-link>
+            <button
+              v-if="user?.loggedIn"
+              type="button"
+              class="flex items-center px-4 py-2"
+              @click="$emit('logout')"
+            >
+              <it-icon-logout class="inline-block" />
+              <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
+            </button>
+          </div>
         </div>
       </div>
     </div>