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

<script setup lang="ts">
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { useVVByLink } from "@/composables";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { User } from "@/stores/user";
import type { CourseSession } from "@/types";
import {
  getCockpitUrl,
  getCompetenceNaviUrl,
  getLearningMentorUrl,
  getLearningPathUrl,
  getMediaCenterUrl,
  isVVLearningMentor,
} from "@/utils/utils";
import { computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

defineProps<{
  show: boolean;
  hasMediaLibraryMenu: boolean;
  hasPreviewMenu: boolean;
  hasCockpitMenu: boolean;
  hasLearningPathMenu: boolean;
  hasCompetenceNaviMenu: boolean;
  hasLearningMentor: boolean;
  hasNotificationsMenu: boolean;
  hasAppointmentsMenu: boolean;
  courseSession: CourseSession | undefined;
  mediaUrl?: string;
  user: User | undefined;
}>();

const emit = defineEmits(["closemodal", "logout"]);

const courseSessionsStore = useCourseSessionsStore();
const vvBuyLink = useVVByLink();

const clickLink = (to: string | undefined) => {
  if (to) {
    router.push(to);
    emit("closemodal");
  }
};

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

<template>
  <ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
    <div>
      <div>
        <div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
          <div class="-ml-4 flex">
            <div v-if="user?.avatar_url">
              <img
                class="inline-block h-16 w-16 rounded-full"
                :src="user?.avatar_url"
                alt=""
              />
            </div>
            <div class="ml-6">
              <h3>{{ user?.first_name }} {{ user?.last_name }}</h3>
            </div>
          </div>
        </div>
        <div>
          <div v-if="courseSession" class="mt-6 border-b">
            <h4 class="text-sm text-gray-900">{{ courseSession.course.title }}</h4>
            <ul class="mt-6">
              <li v-if="hasCockpitMenu" class="mb-6">
                <button
                  data-cy="navigation-mobile-cockpit-link"
                  @click="clickLink(getCockpitUrl(courseSession.course.slug))"
                >
                  {{ $t("cockpit.title") }}
                </button>
              </li>
              <li v-if="hasPreviewMenu" class="mb-6">
                <button
                  data-cy="navigation-mobile-preview-link"
                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
                >
                  {{ $t("a.Vorschau Teilnehmer") }}
                </button>
              </li>
              <li v-if="hasLearningPathMenu" class="mb-6">
                <button
                  data-cy="navigation-mobile-learning-path-link"
                  @click="clickLink(getLearningPathUrl(courseSession.course.slug))"
                >
                  {{ $t("general.learningPath") }}
                </button>
              </li>
              <li v-if="hasCompetenceNaviMenu" class="mb-6">
                <button
                  data-cy="navigation-mobile-competence-profile-link"
                  @click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
                >
                  {{ $t("competences.title") }}
                </button>
              </li>
              <li v-if="hasLearningMentor" class="mb-6">
                <button
                  data-cy="navigation-mobile-mentor-link"
                  @click="clickLink(getLearningMentorUrl(courseSession.course.slug))"
                >
                  {{ $t(mentorTabTitle) }}
                </button>
              </li>

              <li v-if="hasMediaLibraryMenu" class="mb-6">
                <button
                  data-cy="medialibrary-link"
                  @click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
                >
                  {{ $t("a.Mediathek") }}
                </button>
              </li>
              <li
                v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"
                class="mb-6"
              >
                <button
                  data-cy="vv-buy-link"
                  @click="clickLink(vvBuyLink.href.value as string)"
                >
                  {{ $t("a.Lehrgang kaufen") }}
                </button>
              </li>
            </ul>
          </div>
          <div class="mt-6 border-b">
            <ul>
              <li class="mb-6">
                <button data-cy="dashboard-link" @click="clickLink('/')">myVBV</button>
              </li>
            </ul>
          </div>
          <button
            v-if="user?.loggedIn"
            type="button"
            class="mt-6 flex items-center"
            @click="$emit('logout')"
          >
            <it-icon-logout class="inline-block" />
            <span class="ml-1">{{ $t("mainNavigation.logout") }}</span>
          </button>
        </div>
      </div>
    </div>
  </ItFullScreenModal>
</template>