fix: mobile menu

This commit is contained in:
Livio Bieri 2023-09-20 17:16:07 +02:00
parent fa22f5a18e
commit 93f05e4722
2 changed files with 29 additions and 13 deletions

View File

@ -8,6 +8,8 @@ const router = useRouter();
defineProps<{ defineProps<{
show: boolean; show: boolean;
hasExpertNavigation: boolean;
hasMemberNavigation: boolean;
courseSession: CourseSession | undefined; courseSession: CourseSession | undefined;
mediaUrl?: string; mediaUrl?: string;
user: UserState | undefined; user: UserState | undefined;
@ -52,16 +54,30 @@ const clickLink = (to: string | undefined) => {
<div v-if="courseSession" class="mt-6 border-b pb-6"> <div v-if="courseSession" class="mt-6 border-b pb-6">
<h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4> <h4 class="text-sm text-gray-900">{{ courseSession?.course.title }}</h4>
<ul class="mt-6"> <ul class="mt-6">
<li> <template v-if="hasMemberNavigation">
<button @click="clickLink(courseSession?.learning_path_url)"> <li>
{{ $t("general.learningPath") }} <button @click="clickLink(courseSession?.learning_path_url)">
</button> {{ $t("general.learningPath") }}
</li> </button>
<li class="mt-6"> </li>
<button @click="clickLink(`${courseSession?.course_url}/cockpit`)"> <li>
{{ $t("cockpit.title") }} <button @click="clickLink(courseSession?.competence_url)">
</button> {{ $t("competences.title") }}
</li> </button>
</li>
</template>
<template v-if="hasExpertNavigation">
<li class="mt-6">
<button @click="clickLink(`${courseSession?.course_url}/cockpit`)">
{{ $t("cockpit.title") }}
</button>
</li>
<li>
<button @click="clickLink(courseSession?.learning_path_url)">
{{ $t("a.VorschauTeilnehmer") }}
</button>
</li>
</template>
<li class="mt-6"> <li class="mt-6">
<button <button
data-cy="medialibrary-link" data-cy="medialibrary-link"

View File

@ -143,17 +143,17 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
const hasCourseSessionPreview = computed(() => { const hasCourseSessionPreview = computed(() => {
const isCourseExpert = const isCourseExpert =
currentCourseSession.value && currentCourseSessionHasCockpit.value; currentCourseSession.value && currentCourseSessionHasCockpit.value;
return isCourseExpert && (inLearningPath() || inCompetenceProfile()); return Boolean(isCourseExpert && (inLearningPath() || inCompetenceProfile()));
}); });
const hasMemberNavigation = computed(() => { const hasMemberNavigation = computed(() => {
return ( return Boolean(
inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value inCourse() && currentCourseSession.value && !currentCourseSessionHasCockpit.value
); );
}); });
const hasExpertNavigation = computed(() => { const hasExpertNavigation = computed(() => {
return ( return Boolean(
inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value inCourse() && currentCourseSession.value && currentCourseSessionHasCockpit.value
); );
}); });