From 1e27f80949389e9008428f4e1be240b87a90486b Mon Sep 17 00:00:00 2001
From: Livio Bieri <livio@livio.li>
Date: Wed, 20 Sep 2023 17:16:35 +0200
Subject: [PATCH] refactor: main navigation, reduce duplication

---
 .../components/header/MainNavigationBar.vue   | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index 7acf98b4..f2f7cb42 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -57,6 +57,8 @@ 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,56 +106,53 @@ onMounted(() => {
 
               <div class="hidden space-x-8 lg:flex">
                 <!-- Navigation Links Desktop -->
-                <router-link
+                <template
                   v-if="
                     courseSessionsStore.hasExpertNavigation &&
                     courseSessionsStore.currentCourseSession
                   "
-                  :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inCockpit() }"
                 >
-                  {{ t("cockpit.title") }}
-                </router-link>
+                  <router-link
+                    :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inCockpit() }"
+                  >
+                    {{ t("cockpit.title") }}
+                  </router-link>
 
-                <router-link
-                  v-if="
-                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                  :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>
-
-                <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
                   "
-                  :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"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inLearningPath() }"
+                  >
+                    {{ t("general.learningPath") }}
+                  </router-link>
 
-                <router-link
-                  v-if="
-                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession
-                  "
-                  :to="courseSessionsStore.currentCourseSession.competence_url"
-                  class="nav-item"
-                  :class="{ 'nav-item--active': inCompetenceProfile() }"
-                >
-                  {{ t("competences.title") }}
-                </router-link>
+                  <router-link
+                    :to="courseSessionsStore.currentCourseSession.competence_url"
+                    class="nav-item"
+                    :class="{ 'nav-item--active': inCompetenceProfile() }"
+                  >
+                    {{ t("competences.title") }}
+                  </router-link>
+                </template>
               </div>
             </div>