93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useNavigationAttributes } from "@/utils/navigation";
|
|
import { useRouteLookups } from "@/utils/route";
|
|
import {
|
|
getCockpitUrl,
|
|
getCompetenceNaviUrl,
|
|
getLearningMentorUrl,
|
|
getLearningPathUrl,
|
|
} from "@/utils/utils";
|
|
import { useTranslation } from "i18next-vue";
|
|
import { computed } from "vue";
|
|
import SelectedCourseSession from "./SelectedCourseSession.vue";
|
|
|
|
const { t } = useTranslation();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
|
|
const { isInCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
|
|
useRouteLookups();
|
|
const {
|
|
hasCompetenceNaviMenu,
|
|
hasLearningPathMenu,
|
|
hasCockpitMenu,
|
|
hasPreviewMenu,
|
|
hasLearningMentor,
|
|
} = useNavigationAttributes();
|
|
const mentorTabTitle = computed(() =>
|
|
courseSessionsStore.currentCourseSession?.course.configuration.is_uk
|
|
? "a.Praxisbildner"
|
|
: "a.Lernbegleitung"
|
|
);
|
|
</script>
|
|
<template>
|
|
<div
|
|
v-if="courseSessionsStore.currentCourseSession"
|
|
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-no-mobile"
|
|
:class="{ 'nav-item--active': isInCockpit }"
|
|
>
|
|
{{ t("cockpit.title") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasPreviewMenu"
|
|
data-cy="navigation-preview-link"
|
|
:to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
|
|
target="_blank"
|
|
class="nav-item-no-mobile"
|
|
>
|
|
<div class="flex items-center">
|
|
<span>{{ t("a.Vorschau Teilnehmer") }}</span>
|
|
<it-icon-external-link class="ml-2" />
|
|
</div>
|
|
</router-link>
|
|
<router-link
|
|
v-if="hasLearningPathMenu"
|
|
data-cy="navigation-learning-path-link"
|
|
:to="getLearningPathUrl(courseSessionsStore.currentCourseSession.course.slug)"
|
|
class="nav-item-no-mobile"
|
|
:class="{ 'nav-item--active': inLearningPath() }"
|
|
>
|
|
{{ t("general.learningPath") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasCompetenceNaviMenu"
|
|
data-cy="navigation-competence-profile-link"
|
|
:to="getCompetenceNaviUrl(courseSessionsStore.currentCourseSession.course.slug)"
|
|
class="nav-item-no-mobile"
|
|
:class="{ 'nav-item--active': inCompetenceProfile() }"
|
|
>
|
|
{{ t("competences.title") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasLearningMentor"
|
|
data-cy="navigation-learning-mentor-link"
|
|
:to="getLearningMentorUrl(courseSessionsStore.currentCourseSession.course.slug)"
|
|
class="nav-item-no-mobile"
|
|
:class="{ 'nav-item--active': inLearningMentor() }"
|
|
>
|
|
{{ t(mentorTabTitle) }}
|
|
</router-link>
|
|
</div>
|
|
</template>
|