ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move selected course session indicator

This commit is contained in:
Ramon Wenger 2024-10-24 11:20:01 +02:00
parent c6e21ca059
commit a379650367
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/src/components/header/CourseSessionNavigation.vue
View File

@ -10,11 +10,12 @@ import {
} from "@/utils/utils"; } from "@/utils/utils";
import { useTranslation } from "i18next-vue"; import { useTranslation } from "i18next-vue";
import { computed } from "vue"; import { computed } from "vue";
import SelectedCourseSession from "./SelectedCourseSession.vue";
const { t } = useTranslation(); const { t } = useTranslation();
const courseSessionsStore = useCourseSessionsStore(); const courseSessionsStore = useCourseSessionsStore();
const { inCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } = const { isInCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
useRouteLookups(); useRouteLookups();
const { const {
hasCompetenceNaviMenu, hasCompetenceNaviMenu,
@ -30,13 +31,17 @@ const mentorTabTitle = computed(() =>
); );
</script> </script>
<template> <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 <router-link
v-if="hasCockpitMenu" v-if="hasCockpitMenu"
data-cy="navigation-cockpit-link" data-cy="navigation-cockpit-link"
:to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)" :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
class="nav-item" class="nav-item"
:class="{ 'nav-item--active': inCockpit() }" :class="{ 'nav-item--active': isInCockpit }"
> >
{{ t("cockpit.title") }} {{ t("cockpit.title") }}
</router-link> </router-link>

19
client/src/components/header/SelectedCourseSession.vue Normal file
View File

@ -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>