vbv/client/src/components/header/MainNavigationBar.vue

<script setup lang="ts">
import AccountMenu from "@/components/header/AccountMenu.vue";
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { getLoginURL } from "@/router/utils";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useNotificationsStore } from "@/stores/notifications";
import { useUserStore } from "@/stores/user";
import { useNavigationAttributes } from "@/utils/navigation";
import { useRouteLookups } from "@/utils/route";
import {
  getCockpitUrl,
  getCompetenceNaviUrl,
  getLearningMentorUrl,
  getLearningPathUrl,
  getMediaCenterUrl,
} from "@/utils/utils";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
import { useTranslation } from "i18next-vue";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import DefaultNavigation from "./DefaultNavigation.vue";
import MobileMenuButton from "./MobileMenuButton.vue";

log.debug("MainNavigationBar created");

const breakpoints = useBreakpoints(breakpointsTailwind);
const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();
const notificationsStore = useNotificationsStore();
const {
  inCockpit,
  inCompetenceProfile,
  inLearningMentor,
  inLearningPath,
  inMediaLibrary,
  inAppointments,
} = useRouteLookups();
const {
  hasCompetenceNaviMenu,
  hasLearningPathMenu,
  hasMediaLibraryMenu,
  hasCockpitMenu,
  hasPreviewMenu,
  hasAppointmentsMenu,
  hasNotificationsMenu,
  hasLearningMentor,
  hasSessionTitle,
} = useNavigationAttributes();

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 `/dashboard/due-dates?session=${currentCourseSession.id}`;
  } else {
    return `/dashboard/due-dates`;
  }
});

onMounted(() => {
  log.debug("MainNavigationBar mounted");
});

const mentorTabTitle = computed(() =>
  courseSessionsStore.currentCourseSession?.course.configuration.is_uk
    ? "a.Praxisbildner"
    : "a.Lernbegleitung"
);
</script>

<template>
  <Teleport to="body">
    <ItFullScreenModal
      v-if="userStore.loggedIn"
      :show="state.showMobileProfileMenu"
      @closemodal="state.showMobileProfileMenu = false"
    >
      <AccountMenu @close="state.showMobileProfileMenu = false" />
    </ItFullScreenModal>
  </Teleport>
  <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 -->
          <template v-if="courseSessionsStore.currentCourseSession">
            <div class="hidden space-x-8 lg:flex">
              <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.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"
                :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"
                :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"
                :class="{ 'nav-item--active': inLearningMentor() }"
              >
                {{ t(mentorTabTitle) }}
              </router-link>
            </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="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">
            <div
              v-if="userStore.loggedIn"
              class="flex items-center"
              data-cy="header-profile"
            >
              <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>
</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>