96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useNavigationAttributes } from "@/utils/navigation";
|
|
import { useRouteLookups } from "@/utils/route";
|
|
import { getMediaCenterUrl } from "@/utils/utils";
|
|
import log from "loglevel";
|
|
import { computed, onMounted } from "vue";
|
|
import CourseSessionNavigation from "./CourseSessionNavigation.vue";
|
|
import DefaultNavigation from "./DefaultNavigation.vue";
|
|
import MobileMenuButton from "./MobileMenuButton.vue";
|
|
import NotificationButton from "./NotificationButton.vue";
|
|
import ProfileMenuButton from "./ProfileMenuButton.vue";
|
|
|
|
log.debug("MainNavigationBar created");
|
|
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
const { inMediaLibrary, inAppointments } = useRouteLookups();
|
|
const { hasMediaLibraryMenu, hasAppointmentsMenu, hasSessionTitle } =
|
|
useNavigationAttributes();
|
|
|
|
const selectedCourseSessionTitle = computed(() => {
|
|
return courseSessionsStore.currentCourseSession?.title;
|
|
});
|
|
|
|
const appointmentsUrl = computed(() => {
|
|
const currentCourseSession = courseSessionsStore.currentCourseSession;
|
|
if (currentCourseSession) {
|
|
return `/dashboard/due-dates?session=${currentCourseSession.id}`;
|
|
} else {
|
|
return `/dashboard/due-dates`;
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
log.debug("MainNavigationBar mounted");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="bg-blue-900 text-white">
|
|
<div class="mx-auto px-4 lg:px-8">
|
|
<div class="relative flex h-16 justify-between">
|
|
<MobileMenuButton />
|
|
<div class="flex flex-1 items-stretch justify-start">
|
|
<DefaultNavigation />
|
|
|
|
<!-- Satisfy the type checker; these menu items are
|
|
only relevant if there is a current course session -->
|
|
<CourseSessionNavigation />
|
|
</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 -->
|
|
<NotificationButton />
|
|
|
|
<div
|
|
v-if="hasSessionTitle"
|
|
class="nav-item hidden items-center lg:inline-flex"
|
|
>
|
|
<div class="" data-cy="current-course-session-title">
|
|
{{ selectedCourseSessionTitle }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-item">
|
|
<ProfileMenuButton />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style lang="postcss"></style>
|