From 45a102c73ab75361d972e8993553791d3adeda6e Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 17 Oct 2024 17:07:34 +0200
Subject: [PATCH] Add component for course session navigation

---
 .../header/CourseSessionNavigation.vue        |  86 ++++++++++++
 .../components/header/MainNavigationBar.vue   | 127 +-----------------
 client/tailwind.css                           |  12 ++
 3 files changed, 105 insertions(+), 120 deletions(-)
 create mode 100644 client/src/components/header/CourseSessionNavigation.vue

diff --git a/client/src/components/header/CourseSessionNavigation.vue b/client/src/components/header/CourseSessionNavigation.vue
new file mode 100644
index 00000000..4ff81cd6
--- /dev/null
+++ b/client/src/components/header/CourseSessionNavigation.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useNavigationAttributes } from "@/utils/navigation";
+import { useRouteLookups } from "@/utils/route";
+import {
+  getCockpitUrl,
+  getCompetenceNaviUrl,
+  getLearningMentorUrl,
+  getLearningPathUrl,
+} from "@/utils/utils";
+import { useTranslation } from "i18next-vue";
+import { computed } from "vue";
+
+const { t } = useTranslation();
+const courseSessionsStore = useCourseSessionsStore();
+
+const { inCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
+  useRouteLookups();
+const {
+  hasCompetenceNaviMenu,
+  hasLearningPathMenu,
+  hasCockpitMenu,
+  hasPreviewMenu,
+  hasLearningMentor,
+} = useNavigationAttributes();
+const mentorTabTitle = computed(() =>
+  courseSessionsStore.currentCourseSession?.course.configuration.is_uk
+    ? "a.Praxisbildner"
+    : "a.Lernbegleitung"
+);
+</script>
+<template>
+  <div v-if="courseSessionsStore.currentCourseSession" class="hidden space-x-8 lg:flex">
+    <router-link
+      v-if="hasCockpitMenu"
+      data-cy="navigation-cockpit-link"
+      :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
+      class="nav-item"
+      :class="{ 'nav-item--active': inCockpit() }"
+    >
+      {{ t("cockpit.title") }}
+    </router-link>
+
+    <router-link
+      v-if="hasPreviewMenu"
+      data-cy="navigation-preview-link"
+      :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
+      target="_blank"
+      class="nav-item"
+    >
+      <div class="flex items-center">
+        <span>{{ t("a.Vorschau Teilnehmer") }}</span>
+        <it-icon-external-link class="ml-2" />
+      </div>
+    </router-link>
+    <router-link
+      v-if="hasLearningPathMenu"
+      data-cy="navigation-learning-path-link"
+      :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
+      class="nav-item"
+      :class="{ 'nav-item--active': inLearningPath() }"
+    >
+      {{ t("general.learningPath") }}
+    </router-link>
+
+    <router-link
+      v-if="hasCompetenceNaviMenu"
+      data-cy="navigation-competence-profile-link"
+      :to="getCompetenceNaviUrl(courseSessionsStore.currentCourseSession.course.slug)"
+      class="nav-item"
+      :class="{ 'nav-item--active': inCompetenceProfile() }"
+    >
+      {{ t("competences.title") }}
+    </router-link>
+
+    <router-link
+      v-if="hasLearningMentor"
+      data-cy="navigation-learning-mentor-link"
+      :to="getLearningMentorUrl(courseSessionsStore.currentCourseSession.course.slug)"
+      class="nav-item"
+      :class="{ 'nav-item--active': inLearningMentor() }"
+    >
+      {{ t(mentorTabTitle) }}
+    </router-link>
+  </div>
+</template>
diff --git a/client/src/components/header/MainNavigationBar.vue b/client/src/components/header/MainNavigationBar.vue
index d408e2e3..1e7f6482 100644
--- a/client/src/components/header/MainNavigationBar.vue
+++ b/client/src/components/header/MainNavigationBar.vue
@@ -2,16 +2,10 @@
 import { useCourseSessionsStore } from "@/stores/courseSessions";
 import { useNavigationAttributes } from "@/utils/navigation";
 import { useRouteLookups } from "@/utils/route";
-import {
-  getCockpitUrl,
-  getCompetenceNaviUrl,
-  getLearningMentorUrl,
-  getLearningPathUrl,
-  getMediaCenterUrl,
-} from "@/utils/utils";
-import { useTranslation } from "i18next-vue";
+import { getMediaCenterUrl } from "@/utils/utils";
 import log from "loglevel";
 import { computed, onMounted } from "vue";
+import CourseSessionNavigation from "./CourseSessionNavigation.vue";
 import DefaultNavigation from "./DefaultNavigation.vue";
 import MobileMenuButton from "./MobileMenuButton.vue";
 import NotificationButton from "./NotificationButton.vue";
@@ -20,26 +14,9 @@ import ProfileMenuButton from "./ProfileMenuButton.vue";
 log.debug("MainNavigationBar created");
 
 const courseSessionsStore = useCourseSessionsStore();
-const {
-  inCockpit,
-  inCompetenceProfile,
-  inLearningMentor,
-  inLearningPath,
-  inMediaLibrary,
-  inAppointments,
-} = useRouteLookups();
-const {
-  hasCompetenceNaviMenu,
-  hasLearningPathMenu,
-  hasMediaLibraryMenu,
-  hasCockpitMenu,
-  hasPreviewMenu,
-  hasAppointmentsMenu,
-  hasLearningMentor,
-  hasSessionTitle,
-} = useNavigationAttributes();
-
-const { t } = useTranslation();
+const { inMediaLibrary, inAppointments } = useRouteLookups();
+const { hasMediaLibraryMenu, hasAppointmentsMenu, hasSessionTitle } =
+  useNavigationAttributes();
 
 const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
@@ -57,12 +34,6 @@ const appointmentsUrl = computed(() => {
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
-
-const mentorTabTitle = computed(() =>
-  courseSessionsStore.currentCourseSession?.course.configuration.is_uk
-    ? "a.Praxisbildner"
-    : "a.Lernbegleitung"
-);
 </script>
 
 <template>
@@ -75,79 +46,7 @@ const mentorTabTitle = computed(() =>
 
           <!-- 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">
-              <router-link
-                v-if="hasCockpitMenu"
-                data-cy="navigation-cockpit-link"
-                :to="
-                  getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)
-                "
-                class="nav-item"
-                :class="{ 'nav-item--active': inCockpit() }"
-              >
-                {{ t("cockpit.title") }}
-              </router-link>
-
-              <router-link
-                v-if="hasPreviewMenu"
-                data-cy="navigation-preview-link"
-                :to="
-                  getLearningPathUrl(
-                    courseSessionsStore.currentCourseSession.course.slug
-                  )
-                "
-                target="_blank"
-                class="nav-item"
-              >
-                <div class="flex items-center">
-                  <span>{{ t("a.Vorschau Teilnehmer") }}</span>
-                  <it-icon-external-link class="ml-2" />
-                </div>
-              </router-link>
-              <router-link
-                v-if="hasLearningPathMenu"
-                data-cy="navigation-learning-path-link"
-                :to="
-                  getLearningPathUrl(
-                    courseSessionsStore.currentCourseSession.course.slug
-                  )
-                "
-                class="nav-item"
-                :class="{ 'nav-item--active': inLearningPath() }"
-              >
-                {{ t("general.learningPath") }}
-              </router-link>
-
-              <router-link
-                v-if="hasCompetenceNaviMenu"
-                data-cy="navigation-competence-profile-link"
-                :to="
-                  getCompetenceNaviUrl(
-                    courseSessionsStore.currentCourseSession.course.slug
-                  )
-                "
-                class="nav-item"
-                :class="{ 'nav-item--active': inCompetenceProfile() }"
-              >
-                {{ t("competences.title") }}
-              </router-link>
-
-              <router-link
-                v-if="hasLearningMentor"
-                data-cy="navigation-learning-mentor-link"
-                :to="
-                  getLearningMentorUrl(
-                    courseSessionsStore.currentCourseSession.course.slug
-                  )
-                "
-                class="nav-item"
-                :class="{ 'nav-item--active': inLearningMentor() }"
-              >
-                {{ t(mentorTabTitle) }}
-              </router-link>
-            </div>
-          </template>
+          <CourseSessionNavigation />
         </div>
 
         <div class="flex items-stretch justify-start space-x-8">
@@ -193,16 +92,4 @@ const mentorTabTitle = computed(() =>
   </nav>
 </template>
 
-<style lang="postcss" scoped>
-.nav-item {
-  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
-}
-
-.nav-item-no-mobile {
-  @apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
-}
-
-.nav-item--active {
-  @apply border-sky-500;
-}
-</style>
+<style lang="postcss"></style>
diff --git a/client/tailwind.css b/client/tailwind.css
index 14a41aea..9e4d5e07 100644
--- a/client/tailwind.css
+++ b/client/tailwind.css
@@ -175,6 +175,18 @@ textarea {
   .tag-active {
     @apply rounded-full bg-blue-900 px-4 py-2 font-semibold text-white;
   }
+
+  .nav-item {
+    @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
+  }
+
+  .nav-item-no-mobile {
+    @apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
+  }
+
+  .nav-item--active {
+    @apply border-sky-500;
+  }
 }
 
 @layer utilities {