366 lines
13 KiB
Vue
366 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import log from "loglevel";
|
|
import { getLoginURL } from "@/router/utils";
|
|
import AccountMenu from "@/components/header/AccountMenu.vue";
|
|
import MobileMenu from "@/components/header/MobileMenu.vue";
|
|
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
|
|
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
|
|
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useNotificationsStore } from "@/stores/notifications";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { useRouteLookups } from "@/utils/route";
|
|
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
|
|
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
|
|
import { computed, onMounted, reactive } from "vue";
|
|
import { useTranslation } from "i18next-vue";
|
|
import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
|
|
import {
|
|
getCockpitUrl,
|
|
getCompetenceNaviUrl,
|
|
getLearningMentorManagementUrl,
|
|
getLearningPathUrl,
|
|
getMediaCenterUrl,
|
|
} from "@/utils/utils";
|
|
import { useCockpitStore } from "@/stores/cockpit";
|
|
import { VV_COURSE_IDS } from "@/constants";
|
|
|
|
log.debug("MainNavigationBar created");
|
|
|
|
const breakpoints = useBreakpoints(breakpointsTailwind);
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
const notificationsStore = useNotificationsStore();
|
|
const {
|
|
inCockpit,
|
|
inCompetenceProfile,
|
|
inLearningMentor,
|
|
inCourse,
|
|
inLearningPath,
|
|
inMediaLibrary,
|
|
inAppointments,
|
|
} = useRouteLookups();
|
|
|
|
const { t } = useTranslation();
|
|
const state = reactive({
|
|
showMobileNavigationMenu: false,
|
|
showMobileProfileMenu: false,
|
|
});
|
|
|
|
function popoverClick(event: Event) {
|
|
if (breakpoints.smaller("lg").value) {
|
|
event.preventDefault();
|
|
state.showMobileProfileMenu = true;
|
|
}
|
|
}
|
|
|
|
const selectedCourseSessionTitle = computed(() => {
|
|
return courseSessionsStore.currentCourseSession?.title;
|
|
});
|
|
|
|
const appointmentsUrl = computed(() => {
|
|
const currentCourseSession = courseSessionsStore.currentCourseSession;
|
|
if (currentCourseSession) {
|
|
return `/course/${currentCourseSession.course.slug}/appointments`;
|
|
} else {
|
|
return `/appointments`;
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
log.debug("MainNavigationBar mounted");
|
|
});
|
|
|
|
const hasMediaLibraryMenu = computed(() => {
|
|
if (useCockpitStore().hasMentorCockpitType) {
|
|
return false;
|
|
}
|
|
return inCourse() && Boolean(courseSessionsStore.currentCourseSession);
|
|
});
|
|
|
|
const hasCockpitMenu = computed(() => {
|
|
return courseSessionsStore.currentCourseSessionHasCockpit;
|
|
});
|
|
|
|
const hasPreviewMenu = computed(() => {
|
|
return (
|
|
useCockpitStore().hasExpertCockpitType || useCockpitStore().hasMentorCockpitType
|
|
);
|
|
});
|
|
|
|
const hasAppointmentsMenu = computed(() => {
|
|
if (useCockpitStore().hasMentorCockpitType) {
|
|
return false;
|
|
}
|
|
return userStore.loggedIn;
|
|
});
|
|
|
|
const hasNotificationsMenu = computed(() => {
|
|
return userStore.loggedIn;
|
|
});
|
|
|
|
const hasMentorManagementMenu = computed(() => {
|
|
if (courseSessionsStore.currentCourseSessionHasCockpit) {
|
|
return false;
|
|
}
|
|
|
|
// learning mentor management is only available for VV courses
|
|
const currentCourseId = courseSessionsStore.currentCourseSession?.course.id || "";
|
|
return inCourse() && VV_COURSE_IDS.includes(currentCourseId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
|
|
<div v-else>
|
|
<Teleport to="body">
|
|
<MobileMenu
|
|
v-if="userStore.loggedIn"
|
|
:show="state.showMobileNavigationMenu"
|
|
:course-session="courseSessionsStore.currentCourseSession"
|
|
:has-media-library-menu="hasMediaLibraryMenu"
|
|
:has-cockpit-menu="hasCockpitMenu"
|
|
:has-preview-menu="hasPreviewMenu"
|
|
:media-url="
|
|
getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
|
|
"
|
|
:user="userStore"
|
|
@closemodal="state.showMobileNavigationMenu = false"
|
|
@logout="userStore.handleLogout()"
|
|
/>
|
|
</Teleport>
|
|
<Teleport to="body">
|
|
<ItFullScreenModal
|
|
v-if="userStore.loggedIn"
|
|
:show="state.showMobileProfileMenu"
|
|
@closemodal="state.showMobileProfileMenu = false"
|
|
>
|
|
<AccountMenu @close="state.showMobileProfileMenu = false" />
|
|
</ItFullScreenModal>
|
|
</Teleport>
|
|
<Transition name="nav">
|
|
<nav class="bg-blue-900 text-white">
|
|
<div class="mx-auto px-4 lg:px-8">
|
|
<div class="relative flex h-16 justify-between">
|
|
<div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
|
|
<!-- Mobile menu button -->
|
|
<div
|
|
data-cy="navigation-mobile-menu-button"
|
|
class="flex"
|
|
@click="state.showMobileNavigationMenu = true"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
|
|
>
|
|
<it-icon-menu class="h-8 w-8" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-1 items-stretch justify-start">
|
|
<div class="hidden flex-shrink-0 items-center lg:flex">
|
|
<div class="flex items-center">
|
|
<router-link to="/" class="flex">
|
|
<it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
|
|
</router-link>
|
|
<router-link to="/" class="flex">
|
|
<div
|
|
class="ml-1 border-l border-white pl-3 pr-10 text-2xl text-white"
|
|
>
|
|
{{ t("general.title") }}
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Satisfy the type checker; these menu items are
|
|
only relevant if there is a current course session -->
|
|
<template v-if="courseSessionsStore.currentCourseSession">
|
|
<div class="hidden space-x-8 lg:flex">
|
|
<template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
|
|
<router-link
|
|
v-if="hasCockpitMenu"
|
|
data-cy="navigation-cockpit-link"
|
|
:to="
|
|
getCockpitUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inCockpit() }"
|
|
>
|
|
{{ 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"
|
|
>
|
|
<div class="flex items-center">
|
|
<span>{{ t("a.VorschauTeilnehmer") }}</span>
|
|
<it-icon-external-link class="ml-2" />
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
<template v-else>
|
|
<router-link
|
|
data-cy="navigation-learning-path-link"
|
|
:to="
|
|
getLearningPathUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inLearningPath() }"
|
|
>
|
|
{{ t("general.learningPath") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
data-cy="navigation-competence-profile-link"
|
|
:to="
|
|
getCompetenceNaviUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inCompetenceProfile() }"
|
|
>
|
|
{{ t("competences.title") }}
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasMentorManagementMenu"
|
|
data-cy="navigation-learning-mentor-link"
|
|
:to="
|
|
getLearningMentorManagementUrl(
|
|
courseSessionsStore.currentCourseSession.course.slug
|
|
)
|
|
"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inLearningMentor() }"
|
|
>
|
|
{{ t("a.Lernbegleitung") }}
|
|
</router-link>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="flex items-stretch justify-start space-x-8">
|
|
<router-link
|
|
v-if="hasMediaLibraryMenu"
|
|
:to="
|
|
getMediaCenterUrl(
|
|
courseSessionsStore.currentCourseSession?.course.slug
|
|
)
|
|
"
|
|
data-cy="medialibrary-link"
|
|
class="nav-item-no-mobile"
|
|
:class="{ 'nav-item--active': inMediaLibrary() }"
|
|
>
|
|
<it-icon-media-library class="h-8 w-8" />
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="hasAppointmentsMenu"
|
|
:to="appointmentsUrl"
|
|
data-cy="all-duedates-link"
|
|
class="nav-item"
|
|
:class="{ 'nav-item--active': inAppointments() }"
|
|
>
|
|
<it-icon-calendar-light class="h-8 w-8" />
|
|
</router-link>
|
|
|
|
<!-- Notification Bell & Menu -->
|
|
<div v-if="hasNotificationsMenu" class="nav-item leading-none">
|
|
<NotificationPopover>
|
|
<template #toggleButtonContent>
|
|
<div class="relative h-8 w-8">
|
|
<div>
|
|
<it-icon-notification class="h-8 w-8" />
|
|
<div
|
|
v-if="notificationsStore.hasUnread"
|
|
aria-label="unread notifications"
|
|
class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #popoverContent>
|
|
<NotificationPopoverContent />
|
|
</template>
|
|
</NotificationPopover>
|
|
</div>
|
|
|
|
<div
|
|
v-if="selectedCourseSessionTitle"
|
|
class="nav-item hidden items-center lg:inline-flex"
|
|
>
|
|
<div class="">
|
|
{{ selectedCourseSessionTitle }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-item">
|
|
<div v-if="userStore.loggedIn" class="flex items-center">
|
|
<Popover class="relative">
|
|
<PopoverButton @click="popoverClick($event)">
|
|
<div v-if="userStore.avatar_url">
|
|
<img
|
|
class="inline-block h-8 w-8 rounded-full"
|
|
:src="userStore.avatar_url"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
{{ userStore.getFullName }}
|
|
</div>
|
|
</PopoverButton>
|
|
|
|
<PopoverPanel
|
|
v-slot="{ close }"
|
|
class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
|
|
>
|
|
<div class="p-4">
|
|
<AccountMenu @close="close" />
|
|
</div>
|
|
</PopoverPanel>
|
|
</Popover>
|
|
</div>
|
|
<div v-else>
|
|
<a class="" :href="getLoginURL({ lang: userStore.language })">
|
|
Login
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped>
|
|
.nav-item {
|
|
@apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
|
|
}
|
|
|
|
.nav-item-no-mobile {
|
|
@apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
|
|
}
|
|
|
|
.nav-item--active {
|
|
@apply border-sky-500;
|
|
}
|
|
</style>
|