60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useCourseSessionsStore } from "@/stores/courseSessions";
|
|
import { useUserStore } from "@/stores/user";
|
|
import { useNavigationAttributes } from "@/utils/navigation";
|
|
import { getMediaCenterUrl } from "@/utils/utils";
|
|
import { ref } from "vue";
|
|
import MobileMenu from "./MobileMenu.vue";
|
|
|
|
const userStore = useUserStore();
|
|
const courseSessionsStore = useCourseSessionsStore();
|
|
|
|
const {
|
|
hasCompetenceNaviMenu,
|
|
hasLearningPathMenu,
|
|
hasMediaLibraryMenu,
|
|
hasCockpitMenu,
|
|
hasPreviewMenu,
|
|
hasAppointmentsMenu,
|
|
hasNotificationsMenu,
|
|
hasLearningMentor,
|
|
} = useNavigationAttributes();
|
|
|
|
const showMenu = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<MobileMenu
|
|
v-if="userStore.loggedIn"
|
|
:show="showMenu"
|
|
:course-session="courseSessionsStore.currentCourseSession"
|
|
:has-media-library-menu="hasMediaLibraryMenu"
|
|
:has-cockpit-menu="hasCockpitMenu"
|
|
:has-preview-menu="hasPreviewMenu"
|
|
:has-learning-path-menu="hasLearningPathMenu"
|
|
:has-competence-navi-menu="hasCompetenceNaviMenu"
|
|
:has-learning-mentor="hasLearningMentor"
|
|
:has-notifications-menu="hasNotificationsMenu"
|
|
:has-appointments-menu="hasAppointmentsMenu"
|
|
:media-url="
|
|
getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
|
|
"
|
|
:user="userStore"
|
|
@closemodal="showMenu = false"
|
|
@logout="userStore.handleLogout()"
|
|
/>
|
|
</Teleport>
|
|
<div class="inset-y-0 flex items-center lg:hidden">
|
|
<!-- Mobile menu button -->
|
|
<div data-cy="navigation-mobile-menu-button" class="flex" @click="showMenu = 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>
|
|
</template>
|