58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useCurrentCourseSession } from "@/composables";
|
|
import { useRouteLookups } from "@/utils/route";
|
|
import { getCompetenceNaviUrl, getLearningPathUrl } from "@/utils/utils";
|
|
import { useTranslation } from "i18next-vue";
|
|
|
|
const { inCompetenceProfile, inLearningPath } = useRouteLookups();
|
|
const courseSession = useCurrentCourseSession();
|
|
|
|
const { t } = useTranslation();
|
|
</script>
|
|
|
|
<template>
|
|
<div data-cy="course-preview-bar">
|
|
<nav class="bg-yellow-500">
|
|
<div class="mx-auto px-4 lg:px-8">
|
|
<div
|
|
class="relative flex h-auto min-h-16 w-full flex-col items-center justify-end space-x-8 lg:flex-row lg:items-stretch lg:justify-center"
|
|
>
|
|
<span class="flex items-center px-1 pt-1 font-bold text-black">
|
|
{{ t("a.Vorschau Teilnehmer") }} ({{ courseSession.title }})
|
|
</span>
|
|
|
|
<div class="flex space-x-8">
|
|
<router-link
|
|
data-cy="preview-learn-path-link"
|
|
:to="getLearningPathUrl(courseSession.course.slug)"
|
|
class="preview-nav-item"
|
|
:class="{ 'preview-nav-item--active': inLearningPath() }"
|
|
>
|
|
{{ t("general.learningPath") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
data-cy="preview-competence-profile-link"
|
|
:to="getCompetenceNaviUrl(courseSession.course.slug)"
|
|
class="preview-nav-item"
|
|
:class="{ 'preview-nav-item--active': inCompetenceProfile() }"
|
|
>
|
|
{{ t("competences.title") }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped>
|
|
.preview-nav-item {
|
|
@apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-black hover:text-gray-900 focus:text-black;
|
|
}
|
|
|
|
.preview-nav-item--active {
|
|
@apply border-black;
|
|
}
|
|
</style>
|