cleanup: navigation (duplicated code, logic)

client/src/components/header/CoursePreviewBar.vue

@@ -2,6 +2,7 @@
 import { useTranslation } from "i18next-vue";
 import { useRouteLookups } from "@/utils/route";
 import { useCurrentCourseSession } from "@/composables";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 const { inCompetenceProfile, inLearningPath } = useRouteLookups();
 const courseSession = useCurrentCourseSession();
@@ -30,7 +31,7 @@ const { t } = useTranslation();
             </router-link>
 
             <router-link
-              :to="courseSession.competence_url"
+              :to="getCompetenceBaseUrl(courseSession)"
               class="preview-nav-item"
               :class="{ 'preview-nav-item--active': inCompetenceProfile() }"
             >

client/src/components/header/MainNavigationBar.vue

@@ -15,6 +15,7 @@ import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
 import { useTranslation } from "i18next-vue";
 import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 log.debug("MainNavigationBar created");
 
@@ -57,8 +58,6 @@ onMounted(() => {
         :course-session="courseSessionsStore.currentCourseSession"
         :media-url="courseSessionsStore.currentCourseSession?.media_library_url"
         :user="userStore"
-        :has-expert-navigation="courseSessionsStore.hasExpertNavigation"
-        :has-member-navigation="courseSessionsStore.hasMemberNavigation"
         @closemodal="state.showMobileNavigationMenu = false"
         @logout="userStore.handleLogout()"
       />
@@ -104,60 +103,51 @@ onMounted(() => {
                 </div>
               </div>
 
-              <div class="hidden space-x-8 lg:flex">
-                <!-- Navigation Links Desktop -->
-                <template
-                  v-if="
-                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                >
-                  <router-link
-                    :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inCockpit() }"
-                  >
-                    {{ t("cockpit.title") }}
-                  </router-link>
+              <!-- Satisfy the type checker; these menu items are
+              only relevant if there is a current course session -->
+              <template v-if="courseSessionsStore.currentCourseSession">
+                <div class="hidden space-x-8 lg:flex">
+                  <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
+                    <router-link
+                      :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inCockpit() }"
+                    >
+                      {{ t("cockpit.title") }}
+                    </router-link>
 
-                  <router-link
-                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                    target="_blank"
-                    class="nav-item"
-                  >
-                    <div class="flex items-center">
-                      <span>{{ t("a.VorschauTeilnehmer") }}</span>
-                      <it-icon-external-link class="ml-2" />
-                    </div>
-                  </router-link>
-                </template>
-                <template
-                  v-if="
-                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                >
-                  <router-link
-                    :to="courseSessionsStore.currentCourseSession.learning_path_url"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inLearningPath() }"
-                  >
-                    {{ t("general.learningPath") }}
-                  </router-link>
+                    <router-link
+                      :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                      target="_blank"
+                      class="nav-item"
+                    >
+                      <div class="flex items-center">
+                        <span>{{ t("a.VorschauTeilnehmer") }}</span>
+                        <it-icon-external-link class="ml-2" />
+                      </div>
+                    </router-link>
+                  </template>
+                  <template v-else>
+                    <router-link
+                      :to="courseSessionsStore.currentCourseSession.learning_path_url"
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inLearningPath() }"
+                    >
+                      {{ t("general.learningPath") }}
+                    </router-link>
 
-                  <router-link
-                    :to="`${courseSessionsStore.currentCourseSession.competence_url.replace(
-                      // TODO: remove the `competence_url` with url to Navi...
-                      '/competences',
-                      ''
-                    )}`"
-                    class="nav-item"
-                    :class="{ 'nav-item--active': inCompetenceProfile() }"
-                  >
-                    {{ t("competences.title") }}
-                  </router-link>
-                </template>
-              </div>
+                    <router-link
+                      :to="
+                        getCompetenceBaseUrl(courseSessionsStore.currentCourseSession)
+                      "
+                      class="nav-item"
+                      :class="{ 'nav-item--active': inCompetenceProfile() }"
+                    >
+                      {{ t("competences.title") }}
+                    </router-link>
+                  </template>
+                </div>
+              </template>
             </div>
 
             <div class="flex items-stretch justify-start space-x-8">

client/src/components/header/MobileMenu.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
 import type { UserState } from "@/stores/user";
 import type { CourseSession } from "@/types";
 import { useRouter } from "vue-router";
+import { getCompetenceBaseUrl } from "@/utils/utils";
 
 const router = useRouter();
 
@@ -52,36 +54,32 @@ const courseSessionsStore = useCourseSessionsStore();
         </div>
         <div>
           <div v-if="courseSession" class="mt-6 border-b">
-            <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
+            <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
             <ul class="mt-6">
-              <li
-                v-if="courseSessionsStore.currentCourseSessionHasCockpit"
-                class="mb-6"
-              >
-                <button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
-                  {{ $t("cockpit.title") }}
-                </button>
-              </li>
-              <li class="mb-6">
-                <button @click="clickLink(courseSession?.learning_path_url)">
-                  {{ $t("general.learningPath") }}
-                </button>
-              </li>
-              <li class="mb-6">
-                <button
-                  @click="
-                    clickLink(
-                      courseSession?.competence_url.replace(
-                        // TODO: remove the `competence_url` with url to Navi...
-                        '/competences',
-                        ''
-                      )
-                    )
-                  "
-                >
-                  {{ $t("competences.title") }}
-                </button>
-              </li>
+              <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
+                <li class="mb-6">
+                  <button @click="clickLink(`${courseSession.course_url}/cockpit`)">
+                    {{ $t("cockpit.title") }}
+                  </button>
+                </li>
+                <li class="mb-6">
+                  <button @click="clickLink(courseSession.learning_path_url)">
+                    {{ $t("a.VorschauTeilnehmer") }}
+                  </button>
+                </li>
+              </template>
+              <template v-else>
+                <li class="mb-6">
+                  <button @click="clickLink(courseSession.learning_path_url)">
+                    {{ $t("general.learningPath") }}
+                  </button>
+                </li>
+                <li class="mb-6">
+                  <button @click="clickLink(getCompetenceBaseUrl(courseSession))">
+                    {{ $t("competences.title") }}
+                  </button>
+                </li>
+              </template>
               <li class="mb-6">
                 <button
                   data-cy="medialibrary-link"

client/src/stores/courseSessions.ts

@@ -142,18 +142,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
   });
 
-  const hasMemberNavigation = computed(() => {
-    return Boolean(
-      inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
-    );
-  });
-
-  const hasExpertNavigation = computed(() => {
-    return Boolean(
-      inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
-    );
-  });
-
   const circleExperts = computed(() => {
     const circleStore = useCircleStore();
     const circleTranslationKey = circleStore.circle?.translation_key;
@@ -283,8 +271,6 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     switchCourseSession,
     hasCockpit,
     hasCourseSessionPreview,
-    hasMemberNavigation,
-    hasExpertNavigation,
     currentCourseSessionHasCockpit,
     canUploadCircleDocuments,
     circleDocuments,

client/src/utils/utils.ts

@@ -1,3 +1,13 @@
+import type { CourseSession } from "@/types";
+
 export function assertUnreachable(msg: string): never {
   throw new Error("Didn't expect to get here, " + msg);
 }
+
+export function getCompetenceBaseUrl(courseSession: CourseSession): string {
+  return courseSession.competence_url.replace(
+    // TODO: remove the `competence_url` with url to Navi...
+    "/competences",
+    ""
+  );
+}