WIP: Add mobile modal, refactor modal

client/src/components/MainNavigationBar.vue

@@ -1,8 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import * as log from 'loglevel';
 
 import { onMounted, reactive} from 'vue';
 import { useUserStore } from '@/stores/user';
+import { useLearningPathStore } from '@/stores/learningPath';
 import { useRoute, useRouter } from 'vue-router';
 import { useAppStore } from '@/stores/app';
 import IconLogout from "@/components/icons/IconLogout.vue";
@@ -16,16 +17,13 @@ const route = useRoute()
 const router = useRouter()
 const userStore = useUserStore();
 const appStore = useAppStore();
+const learningPathStore = useLearningPathStore();
 const state = reactive({showMenu: false});
 
 function toggleNav() {
   state.showMenu = !state.showMenu;
 }
 
-function calcNavigationMobileOpenClasses() {
-  return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
-}
-
 function menuActive(checkPath) {
   return route.path.startsWith(checkPath);
 }
@@ -34,6 +32,10 @@ function inLearningPath() {
   return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
 }
 
+function learningPathName (): string {
+  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath.title : '';
+}
+
 function backButtonUrl() {
   if (route.path.startsWith('/circle/')) {
     return '/learningpath/versicherungsvermittlerin';
@@ -83,13 +85,18 @@ const profileDropdownData = [
 </script>
 
 <template>
+  <div>
     <Teleport to="body">
       <MobileMenu
+        v-if="learningPathName()"
+        :user="userStore"
         :show="state.showMenu"
+        :learning-path-name="learningPathName()"
+        @closemodal="state.showMenu = false"
       />
     </Teleport>
     <Transition name="nav">
-    <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
+      <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900">
         <nav
           class="
             px-8
@@ -122,7 +129,7 @@ const profileDropdownData = [
               </router-link>
             </div>
 
-          <div class="flex items-center">
+            <div class="flex items-center lg:hidden">
               <router-link
                 to="/messages"
                 class="nav-item flex flex-row items-center"
@@ -130,7 +137,7 @@ const profileDropdownData = [
                 <it-icon-message class="w-8 h-8 mr-6"/>
               </router-link>
               <!-- Mobile menu button -->
-            <div @click="toggleNav" class="flex lg:hidden">
+              <div @click="toggleNav" class="flex">
                 <button
                   type="button"
                   class="
@@ -153,14 +160,10 @@ const profileDropdownData = [
             :class="state.showMenu ? 'flex' : 'hidden'"
             class="
               flex-auto
-            flex-col
               mt-8
-            space-y-8
               lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
             "
           >
-
-
             <router-link
               v-if="inLearningPath()"
               to="/learningpath/versicherungsvermittlerin"
@@ -194,6 +197,12 @@ const profileDropdownData = [
             >
               Mediathek
             </router-link>
+            <router-link
+              to="/messages"
+              class="nav-item flex flex-row items-center"
+            >
+              <it-icon-message class="w-8 h-8 mr-6"/>
+            </router-link>
             <div class="nav-item flex items-center" v-if="userStore.loggedIn">
               <ItDropdown
                 :button-classes="[]"
@@ -216,6 +225,7 @@ const profileDropdownData = [
         </nav>
       </div>
     </Transition>
+  </div>
 </template>
 
 <style lang="postcss" scoped>

client/src/components/MobileMenu.vue

@@ -1,20 +1,36 @@
 <script setup lang="ts">
+import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
 
+const props = defineProps<{
+  show: boolean,
+  user: object,
+  learningPathName: string
+}>()
+
+const emits = defineEmits(['closemodal'])
 
 </script>
 
 <template>
-<div>
+  <ItFullScreenModal
+    :show="show"
+    @closemodal="$emit('closemodal')"
+  >
   <div>
     <div>
-      <img>
       <div>
-        <h3>Jan</h3>
-        link
-      </div>
+        <div v-if="user.avatar_url">
+          <img class="inline-block h-8 w-8 rounded-full"
+               :src="user.avatar_url"
+               alt=""/>
         </div>
         <div>
-      <h4>Kurs:</h4>
+          <h3>{{user.first_name}} {{user.last_name}}</h3>
+          <a>Kontoeinstellungen</a>
+        </div>
+      </div>
+      <div v-if="learningPathName">
+        <h4>Kurs: {{learningPathName}}</h4>
         <ul>
           <li>Lernpfad</li>
           <li>Komp</li>
@@ -30,5 +46,6 @@
         Abmelden
       </div>
     </div>
-</div>
+  </div>
+  </ItFullScreenModal>
 </template>

client/src/components/circle/CircleOverview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-// inspiration https://vuejs.org/examples/#modal
 import {Circle} from '@/services/circle';
+import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
 
 const props = defineProps<{
   circle: Circle,
@@ -12,19 +12,10 @@ const emits = defineEmits(['closemodal'])
 </script>
 
 <template>
-  <Transition mode="in-out">
-    <div
-      v-if="show"
-      class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
-      <button
-        type="button"
-        class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
-        @click="$emit('closemodal')"
+  <ItFullScreenModal
+    :show="show"
+    @closemodal="$emit('closemodal')"
   >
-        <it-icon-close></it-icon-close>
-      </button>
-
-
     <h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
 
     <p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
@@ -53,9 +44,7 @@ const emits = defineEmits(['closemodal'])
         {{jobSituation.value}}
       </li>
     </ul>
-
-    </div>
-  </Transition>
+  </ItFullScreenModal>
 </template>
 
 <style scoped>

client/src/components/ui/ItFullScreenModal.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// inspiration https://vuejs.org/examples/#modal
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emits = defineEmits(['closemodal'])
+
+</script>
+
+<template>
+  <Transition mode="in-out">
+    <div
+      v-if="show"
+      class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
+      <button
+        type="button"
+        class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
+        @click="$emit('closemodal')"
+      >
+        <it-icon-close></it-icon-close>
+      </button>
+      <slot></slot>
+    </div>
+  </Transition>
+</template>