From a37965036786aaec83bf3fcea0de2d4365a9eac0 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 24 Oct 2024 11:20:01 +0200
Subject: [PATCH] Move selected course session indicator

---
 .../header/CourseSessionNavigation.vue        | 11 ++++++++---
 .../header/SelectedCourseSession.vue          | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/header/SelectedCourseSession.vue

diff --git a/client/src/components/header/CourseSessionNavigation.vue b/client/src/components/header/CourseSessionNavigation.vue
index 4ff81cd6..e756e5d2 100644
--- a/client/src/components/header/CourseSessionNavigation.vue
+++ b/client/src/components/header/CourseSessionNavigation.vue
@@ -10,11 +10,12 @@ import {
 } from "@/utils/utils";
 import { useTranslation } from "i18next-vue";
 import { computed } from "vue";
+import SelectedCourseSession from "./SelectedCourseSession.vue";
 
 const { t } = useTranslation();
 const courseSessionsStore = useCourseSessionsStore();
 
-const { inCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
+const { isInCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
   useRouteLookups();
 const {
   hasCompetenceNaviMenu,
@@ -30,13 +31,17 @@ const mentorTabTitle = computed(() =>
 );
 </script>
 <template>
-  <div v-if="courseSessionsStore.currentCourseSession" class="hidden space-x-8 lg:flex">
+  <div
+    v-if="courseSessionsStore.currentCourseSession"
+    class="hidden space-x-8 px-10 lg:flex"
+  >
+    <SelectedCourseSession />
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"
       :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
       class="nav-item"
-      :class="{ 'nav-item--active': inCockpit() }"
+      :class="{ 'nav-item--active': isInCockpit }"
     >
       {{ t("cockpit.title") }}
     </router-link>
diff --git a/client/src/components/header/SelectedCourseSession.vue b/client/src/components/header/SelectedCourseSession.vue
new file mode 100644
index 00000000..95725bd4
--- /dev/null
+++ b/client/src/components/header/SelectedCourseSession.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+import { useNavigationAttributes } from "@/utils/navigation";
+import { computed } from "vue";
+
+const courseSessionsStore = useCourseSessionsStore();
+const { hasSessionTitle } = useNavigationAttributes();
+
+const selectedCourseSessionTitle = computed(() => {
+  return courseSessionsStore.currentCourseSession?.title;
+});
+</script>
+<template>
+  <div v-if="hasSessionTitle" class="nav-item hidden items-center lg:inline-flex">
+    <div class="" data-cy="current-course-session-title">
+      {{ selectedCourseSessionTitle }}
+    </div>
+  </div>
+</template>