From 93f05e4722fa1886ed86b8acd7386dfb60b716cc Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 17:16:07 +0200
Subject: [PATCH] fix: mobile menu

---
 client/src/components/header/MobileMenu.vue | 36 +++++++++++++++------
 client/src/stores/courseSessions.ts         |  6 ++--
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/client/src/components/header/MobileMenu.vue b/client/src/components/header/MobileMenu.vue
index 7be14ab6..b734a4d0 100644
--- a/client/src/components/header/MobileMenu.vue
+++ b/client/src/components/header/MobileMenu.vue
@@ -8,6 +8,8 @@ const router = useRouter();
 
 defineProps<{
   show: boolean;
+  hasExpertNavigation: boolean;
+  hasMemberNavigation: boolean;
   courseSession: CourseSession | undefined;
   mediaUrl?: string;
   user: UserState | undefined;
@@ -52,16 +54,30 @@ const clickLink = (to: string | undefined) => {
           <div v-if="courseSession" class="mt-6 border-b pb-6">
             <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
             <ul class="mt-6">
-              <li>
-                <button @click="clickLink(courseSession?.learning_path_url)">
-                  {{ $t("general.learningPath") }}
-                </button>
-              </li>
-              <li class="mt-6">
-                <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
-                  {{ $t("cockpit.title") }}
-                </button>
-              </li>
+              <template v-if="hasMemberNavigation">
+                <li>
+                  <button @click="clickLink(courseSession?.learning_path_url)">
+                    {{ $t("general.learningPath") }}
+                  </button>
+                </li>
+                <li>
+                  <button @click="clickLink(courseSession?.competence_url)">
+                    {{ $t("competences.title") }}
+                  </button>
+                </li>
+              </template>
+              <template v-if="hasExpertNavigation">
+                <li class="mt-6">
+                  <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
+                    {{ $t("cockpit.title") }}
+                  </button>
+                </li>
+                <li>
+                  <button @click="clickLink(courseSession?.learning_path_url)">
+                    {{ $t("a.VorschauTeilnehmer") }}
+                  </button>
+                </li>
+              </template>
               <li class="mt-6">
                 <button
                   data-cy="medialibrary-link"
diff --git a/client/src/stores/courseSessions.ts b/client/src/stores/courseSessions.ts
index 5fff40b3..93ba7e55 100644
--- a/client/src/stores/courseSessions.ts
+++ b/client/src/stores/courseSessions.ts
@@ -143,17 +143,17 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const hasCourseSessionPreview = computed(() => {
     const isCourseExpert =
       currentCourseSession.value && currentCourseSessionHasCockpit.value;
-    return isCourseExpert && (inLearningPath() || inCompetenceProfile());
+    return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
   });
 
   const hasMemberNavigation = computed(() => {
-    return (
+    return Boolean(
       inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
     );
   });
 
   const hasExpertNavigation = computed(() => {
-    return (
+    return Boolean(
       inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
     );
   });