ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add styling to active mobile navigation item

This commit is contained in:
Ramon Wenger 2024-10-26 20:58:52 +02:00
parent 0c1a2b3151
commit e5cbdc1620
1 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/src/components/header/MobileMenu.vue
View File

@ -71,56 +71,74 @@ const mentorTabTitle = computed(() =>
</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">
<h4 class="px-4 text-sm text-gray-900">{{ courseSession.course.title }}</h4>
<ul class="mt-6 flex flex-col">
<li v-if="hasCockpitMenu" class="mb-6">
<button
<router-link
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
data-cy="navigation-mobile-cockpit-link"
@click="clickLink(getCockpitUrl(courseSession.course.slug))"
:to="getCockpitUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t("cockpit.title") }}
</button>
</router-link>
</li>
<li v-if="hasPreviewMenu" class="mb-6">
<button
<li v-if="hasPreviewMenu" class="mb-2 flex">
<router-link
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
data-cy="navigation-mobile-preview-link"
@click="clickLink(getLearningPathUrl(courseSession.course.slug))"
:to="getLearningPathUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t("a.Vorschau Teilnehmer") }}
</button>
</router-link>
</li>
<li v-if="hasLearningPathMenu" class="mb-6">
<button
<li v-if="hasLearningPathMenu" class="mb-2 flex">
<router-link
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
data-cy="navigation-mobile-learning-path-link"
@click="clickLink(getLearningPathUrl(courseSession.course.slug))"
:to="getLearningPathUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t("general.learningPath") }}
</button>
</router-link>
</li>
<li v-if="hasCompetenceNaviMenu" class="mb-6">
<button
<li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
<router-link
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
data-cy="navigation-mobile-competence-profile-link"
@click="clickLink(getCompetenceNaviUrl(courseSession.course.slug))"
:to="getCompetenceNaviUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t("competences.title") }}
</button>
</router-link>
</li>
<li v-if="hasLearningMentor" class="mb-6">
<button
<li v-if="hasLearningMentor" class="mb-2 flex">
<router-link
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
data-cy="navigation-mobile-mentor-link"
@click="clickLink(getLearningMentorUrl(courseSession.course.slug))"
:to="getLearningMentorUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t(mentorTabTitle) }}
</button>
</router-link>
</li>
<li v-if="hasMediaLibraryMenu" class="mb-6">
<button
<li v-if="hasMediaLibraryMenu" class="mb-2 flex">
<router-link
data-cy="medialibrary-link"
@click="clickLink(getMediaCenterUrl(courseSession.course.slug))"
class="w-full px-4 py-2"
active-class="bg-gray-200 text-blue-900 font-bold"
:to="getMediaCenterUrl(courseSession.course.slug)"
@click="$emit('closemodal')"
>
{{ $t("a.Mediathek") }}
</button>
</router-link>
</li>
<li
v-if="isVVLearningMentor(courseSessionsStore.currentCourseSession)"