Style mobile menu

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()"

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>
+      <div>
+        <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>Komp</li>
+            <li class="mt-6">Komp</li>
           </ul>
         </div>
-      <div>
+        <div class="mt-6 pb-6 border-b border-gray-500">
           <ul>
             <li>Shop</li>
-          <li>Mediathek</li>
+            <li class="mt-6">Mediathek</li>
           </ul>
         </div>
-      <div>
-        Abmelden
+        <div class="mt-6 items-center">
+          <IconLogout class="inline-block" /><span class="ml-1">Abmelden</span>
+        </div>
       </div>
     </div>
   </div>