feat: added preview bar

client/src/components/header/CoursePreviewBar.vue

@@ -16,10 +16,9 @@ const { t } = useTranslation();
         <div
           class="relative flex h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
         >
-          <strong class="flex items-center px-1 pt-1 text-black">
+          <span class="flex items-center px-1 pt-1 font-bold text-black">
-            <!-- TODO: @livioso i18n -->
+            {{ t("a.VorschauTeilnehmer") }} ({{ courseSession.title }})
-            Vorschau: Teilnehmer ({{ courseSession.title }})
+          </span>
-          </strong>
 
           <div class="flex space-x-8">
             <router-link

client/src/components/header/MainNavigationBar.vue

@@ -42,21 +42,13 @@ const selectedCourseSessionTitle = computed(() => {
   return courseSessionsStore.currentCourseSession?.title;
 });
 
-const isTrainerInCourseSessionPreview = computed(() => {
-  // todo wip @livioso check if this is correct?
-  const isTrainer =
-    courseSessionsStore.currentCourseSession &&
-    courseSessionsStore.currentCourseSessionHasCockpit;
-  return isTrainer && !inCockpit();
-});
-
 onMounted(() => {
   log.debug("MainNavigationBar mounted");
 });
 </script>
 
 <template>
-  <CoursePreviewBar v-if="isTrainerInCourseSessionPreview" />
+  <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
   <div v-else>
     <Teleport to="body">
       <MobileMenu
@@ -114,9 +106,8 @@ onMounted(() => {
                 <!-- Navigation Links Desktop -->
                 <router-link
                   v-if="
-                    inCourse() &&
+                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession &&
+                    courseSessionsStore.currentCourseSession
-                    courseSessionsStore.currentCourseSessionHasCockpit
                   "
                   :to="`${courseSessionsStore.currentCourseSession.course_url}/cockpit`"
                   class="nav-item"
@@ -127,23 +118,23 @@ onMounted(() => {
 
                 <router-link
                   v-if="
-                    inCourse() &&
+                    courseSessionsStore.hasExpertNavigation &&
-                    courseSessionsStore.currentCourseSession &&
+                    courseSessionsStore.currentCourseSession
-                    inCockpit()
                   "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   target="_blank"
                   class="nav-item"
-                  :class="{ 'nav-item--active': inLearningPath() }"
                 >
-                  {{ t("general.preview") }}
+                  <div class="flex items-center">
+                    <span>{{ t("a.VorschauTeilnehmer") }}</span>
+                    <it-icon-external-link class="ml-2" />
+                  </div>
                 </router-link>
 
                 <router-link
                   v-if="
-                    inCourse() &&
+                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession &&
+                    courseSessionsStore.currentCourseSession
-                    !courseSessionsStore.currentCourseSessionHasCockpit
                   "
                   :to="courseSessionsStore.currentCourseSession.learning_path_url"
                   class="nav-item"
@@ -154,9 +145,8 @@ onMounted(() => {
 
                 <router-link
                   v-if="
-                    inCourse() &&
+                    courseSessionsStore.hasMemberNavigation &&
-                    courseSessionsStore.currentCourseSession &&
+                    courseSessionsStore.currentCourseSession
-                    !courseSessionsStore.currentCourseSessionHasCockpit
                   "
                   :to="courseSessionsStore.currentCourseSession.competence_url"
                   class="nav-item"
@@ -255,15 +245,4 @@ onMounted(() => {
 .nav-item--active {
   @apply border-sky-500;
 }
-
-.nav-enter-active,
-.nav-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.nav-enter-from,
-.nav-leave-to {
-  opacity: 0;
-  transform: translateY(-80px);
-}
 </style>

client/src/pages/learningPath/learningContentPage/LearningContentContainer.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import * as log from "loglevel";
+import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
+import { useCourseSessionsStore } from "@/stores/courseSessions";
+
+const courseSessionsStore = useCourseSessionsStore();
 
 log.debug("LearningContentContainer.vue setup");
 
@@ -9,6 +13,7 @@ defineEmits(["exit"]);
 <template>
   <div>
     <div class="absolute bottom-0 top-0 w-full bg-white">
+      <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
       <div class="h-content overflow-y-auto">
         <header
           class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"

client/src/stores/courseSessions.ts

@@ -10,6 +10,7 @@ import type {
   ExpertSessionUser,
 } from "@/types";
 import eventBus from "@/utils/eventBus";
+import { useRouteLookups } from "@/utils/route";
 import { useLocalStorage } from "@vueuse/core";
 import dayjs from "dayjs";
 import uniqBy from "lodash/uniqBy";
@@ -24,6 +25,7 @@ const SELECTED_COURSE_SESSIONS_KEY = "selectedCourseSessionMap";
 export const useCourseSessionsStore = defineStore("courseSessions", () => {
   const loaded = ref(false);
   const allCourseSessions = ref<CourseSession[]>([]);
+  const { inCompetenceProfile, inLearningPath, inCourse } = useRouteLookups();
 
   async function loadCourseSessionsData(reload = false) {
     log.debug("loadCourseSessionsData called");
@@ -138,6 +140,24 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     return false;
   });
 
+  const hasCourseSessionPreview = computed(() => {
+    const isCourseExpert =
+      currentCourseSession.value && currentCourseSessionHasCockpit.value;
+    return isCourseExpert && (inLearningPath() || inCompetenceProfile());
+  });
+
+  const hasMemberNavigation = computed(() => {
+    return (
+      inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
+    );
+  });
+
+  const hasExpertNavigation = computed(() => {
+    return (
+      inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
+    );
+  });
+
   const circleExperts = computed(() => {
     const circleStore = useCircleStore();
     const circleTranslationKey = circleStore.circle?.translation_key;
@@ -266,6 +286,9 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
     courseSessionForCourse,
     switchCourseSession,
     hasCockpit,
+    hasCourseSessionPreview,
+    hasMemberNavigation,
+    hasExpertNavigation,
     currentCourseSessionHasCockpit,
     canUploadCircleDocuments,
     circleDocuments,