From 75fc75616db9b74c77c06b4867415e9ac2cae02c Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 8 Aug 2022 09:54:57 +0200
Subject: [PATCH] Style mobile menu

---
 client/src/components/MainNavigationBar.vue |  1 -
 client/src/components/MobileMenu.vue        | 46 +++++++++++++--------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/client/src/components/MainNavigationBar.vue b/client/src/components/MainNavigationBar.vue
index ddebed09..ded491a4 100644
--- a/client/src/components/MainNavigationBar.vue
+++ b/client/src/components/MainNavigationBar.vue
@@ -88,7 +88,6 @@ const profileDropdownData = [
   <div>
     <Teleport to="body">
       <MobileMenu
-        v-if="learningPathName()"
         :user="userStore"
         :show="state.showMenu"
         :learning-path-name="learningPathName()"
diff --git a/client/src/components/MobileMenu.vue b/client/src/components/MobileMenu.vue
index 95aca544..149e375e 100644
--- a/client/src/components/MobileMenu.vue
+++ b/client/src/components/MobileMenu.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
+import IconLogout from '@/components/icons/IconLogout.vue'
+import IconSettings from '@/components/icons/IconSettings.vue'
 
 const props = defineProps<{
   show: boolean,
@@ -18,32 +20,40 @@ const emits = defineEmits(['closemodal'])
   >
   <div>
     <div>
-      <div>
+      <div class="flex border-b border-gray-500 -mx-8 px-8 pb-4">
         <div v-if="user.avatar_url">
-          <img class="inline-block h-8 w-8 rounded-full"
+          <img class="inline-block h-16 w-16 rounded-full"
                :src="user.avatar_url"
                alt=""/>
         </div>
-        <div>
+        <div class="ml-6">
           <h3>{{user.first_name}} {{user.last_name}}</h3>
-          <a>Kontoeinstellungen</a>
+            <RouterLink
+              to="/profil"
+              class="mt-2 inline-block items-center">
+              <IconSettings class="inline-block" /><span class="ml-3">Kontoeinstellungen</span>
+            </RouterLink>
         </div>
       </div>
-      <div v-if="learningPathName">
-        <h4>Kurs: {{learningPathName}}</h4>
-        <ul>
-          <li>Lernpfad</li>
-          <li>Komp</li>
-        </ul>
-      </div>
       <div>
-        <ul>
-          <li>Shop</li>
-          <li>Mediathek</li>
-        </ul>
-      </div>
-      <div>
-        Abmelden
+        <div
+          class="mt-6 pb-6 border-b border-gray-500"
+          v-if="learningPathName">
+          <h4 class="text-gray-900 text-sm">Kurs: {{learningPathName}}</h4>
+          <ul class="mt-6">
+            <li>Lernpfad</li>
+            <li class="mt-6">Komp</li>
+          </ul>
+        </div>
+        <div class="mt-6 pb-6 border-b border-gray-500">
+          <ul>
+            <li>Shop</li>
+            <li class="mt-6">Mediathek</li>
+          </ul>
+        </div>
+        <div class="mt-6 items-center">
+          <IconLogout class="inline-block" /><span class="ml-1">Abmelden</span>
+        </div>
       </div>
     </div>
   </div>