Move selected course session indicator

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>

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>