Show selected course session on mobile

client/src/components/header/CourseSessionNavigation.vue

@@ -33,14 +33,14 @@ const mentorTabTitle = computed(() =>
 <template>
   <div
     v-if="courseSessionsStore.currentCourseSession"
-    class="hidden space-x-8 px-10 lg:flex"
+    class="flex space-x-8 px-2 lg:px-10"
   >
     <SelectedCourseSession />
     <router-link
       v-if="hasCockpitMenu"
       data-cy="navigation-cockpit-link"
       :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': isInCockpit }"
     >
       {{ t("cockpit.title") }}
@@ -51,7 +51,7 @@ const mentorTabTitle = computed(() =>
       data-cy="navigation-preview-link"
       :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
       target="_blank"
-      class="nav-item"
+      class="nav-item-no-mobile"
     >
       <div class="flex items-center">
         <span>{{ t("a.Vorschau Teilnehmer") }}</span>
@@ -62,7 +62,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasLearningPathMenu"
       data-cy="navigation-learning-path-link"
       :to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inLearningPath() }"
     >
       {{ t("general.learningPath") }}
@@ -72,7 +72,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasCompetenceNaviMenu"
       data-cy="navigation-competence-profile-link"
       :to="getCompetenceNaviUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inCompetenceProfile() }"
     >
       {{ t("competences.title") }}
@@ -82,7 +82,7 @@ const mentorTabTitle = computed(() =>
       v-if="hasLearningMentor"
       data-cy="navigation-learning-mentor-link"
       :to="getLearningMentorUrl(courseSessionsStore.currentCourseSession.course.slug)"
-      class="nav-item"
+      class="nav-item-no-mobile"
       :class="{ 'nav-item--active': inLearningMentor() }"
     >
       {{ t(mentorTabTitle) }}

client/src/components/header/SelectedCourseSession.vue

@@ -11,7 +11,7 @@ const selectedCourseSessionTitle = computed(() => {
 });
 </script>
 <template>
-  <div v-if="hasSessionTitle" class="nav-item hidden items-center lg:inline-flex">
+  <div v-if="hasSessionTitle" class="nav-item inline-flex items-center lg:inline-flex">
     <div class="" data-cy="current-course-session-title">
       {{ selectedCourseSessionTitle }}
     </div>