Close MobileMenu on click

client/src/components/MainNavigationBar.vue

@@ -32,8 +32,16 @@ function inLearningPath() {
   return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
 }
 
+function getLearningPathStringProp (prop: 'title' | 'slug'): string {
+  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath[prop] : '';
+}
+
 function learningPathName (): string {
-  return inLearningPath() && learningPathStore.learningPath ? learningPathStore.learningPath.title : '';
+  return getLearningPathStringProp('title')
+}
+
+function learninPathSlug (): string {
+  return getLearningPathStringProp('slug')
 }
 
 function backButtonUrl() {

client/src/components/MobileMenu.vue

@@ -2,15 +2,24 @@
 import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
 import IconLogout from '@/components/icons/IconLogout.vue'
 import IconSettings from '@/components/icons/IconSettings.vue'
+import {useRouter} from "vue-router";
+
+const router = useRouter()
 
 const props = defineProps<{
   show: boolean,
   user: object,
-  learningPathName: string
+  learningPathName: string,
+  learningPathSlug: string
 }>()
 
 const emits = defineEmits(['closemodal'])
 
+const clickLink = (to: string) => {
+  router.push(to)
+  emits('closemodal')
+}
+
 </script>
 
 <template>
@@ -28,11 +37,11 @@ const emits = defineEmits(['closemodal'])
         </div>
         <div class="ml-6">
           <h3>{{user.first_name}} {{user.last_name}}</h3>
-            <RouterLink
+            <button
-              to="/profil"
+              @click="clickLink('/profile')"
               class="mt-2 inline-block items-center">
               <IconSettings class="inline-block" /><span class="ml-3">Kontoeinstellungen</span>
-            </RouterLink>
+            </button>
         </div>
       </div>
       <div>
@@ -41,8 +50,8 @@ const emits = defineEmits(['closemodal'])
           v-if="learningPathName">
           <h4 class="text-gray-900 text-sm">Kurs: {{learningPathName}}</h4>
           <ul class="mt-6">
-            <li>Lernpfad</li>
+            <li><button @click="clickLink('/learningpath')">Lernpfad</button></li>
-            <li class="mt-6">Komp</li>
+            <li class="mt-6">Kompetenzprofil</li>
           </ul>
         </div>
         <div class="mt-6 pb-6 border-b border-gray-500">