Fix styling of mobile menu
This commit is contained in:
parent
8631fca09d
commit
31db223661
|
|
@ -61,9 +61,9 @@ const profileRoute = {
|
|||
|
||||
<template>
|
||||
<ItFullScreenModal :show="show" @closemodal="emit('closemodal')">
|
||||
<div class="-mx-4">
|
||||
<div>
|
||||
<div>
|
||||
<div v-if="user?.loggedIn" class="-mx-4 border-b px-8 pb-4">
|
||||
<div v-if="user?.loggedIn" class="border-b px-8 pb-4">
|
||||
<div class="-ml-4 flex">
|
||||
<div v-if="user?.avatar_url">
|
||||
<img
|
||||
|
|
@ -78,8 +78,8 @@ const profileRoute = {
|
|||
<div class="mb-3 text-sm text-gray-800">{{ user.email }}</div>
|
||||
<router-link
|
||||
:to="profileRoute"
|
||||
@click="emit('closemodal')"
|
||||
class="underline"
|
||||
@click="emit('closemodal')"
|
||||
>
|
||||
{{ $t("a.Profil anzeigen") }}
|
||||
</router-link>
|
||||
|
|
@ -87,12 +87,14 @@ const profileRoute = {
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="courseSession" class="mt-6 border-b">
|
||||
<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">
|
||||
<div v-if="courseSession" class="border-b px-4 py-6">
|
||||
<h4 class="mb-4 px-4 text-sm text-gray-900">
|
||||
{{ courseSession.course.title }}
|
||||
</h4>
|
||||
<ul class="flex flex-col gap-2">
|
||||
<li v-if="hasCockpitMenu">
|
||||
<router-link
|
||||
class="w-full px-4 py-2"
|
||||
class="block w-full px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
data-cy="navigation-mobile-cockpit-link"
|
||||
:to="getCockpitUrl(courseSession.course.slug)"
|
||||
|
|
@ -101,9 +103,9 @@ const profileRoute = {
|
|||
{{ $t("cockpit.title") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="hasPreviewMenu" class="mb-2 flex">
|
||||
<li v-if="hasPreviewMenu">
|
||||
<router-link
|
||||
class="w-full px-4 py-2"
|
||||
class="block w-full px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
data-cy="navigation-mobile-preview-link"
|
||||
:to="getLearningPathUrl(courseSession.course.slug)"
|
||||
|
|
@ -112,9 +114,9 @@ const profileRoute = {
|
|||
{{ $t("a.Vorschau Teilnehmer") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="hasLearningPathMenu" class="mb-2 flex">
|
||||
<li v-if="hasLearningPathMenu">
|
||||
<router-link
|
||||
class="w-full px-4 py-2"
|
||||
class="block w-full px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
data-cy="navigation-mobile-learning-path-link"
|
||||
:to="getLearningPathUrl(courseSession.course.slug)"
|
||||
|
|
@ -123,9 +125,9 @@ const profileRoute = {
|
|||
{{ $t("general.learningPath") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="hasCompetenceNaviMenu" class="mb-2 flex">
|
||||
<li v-if="hasCompetenceNaviMenu">
|
||||
<router-link
|
||||
class="w-full px-4 py-2"
|
||||
class="block w-full px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
data-cy="navigation-mobile-competence-profile-link"
|
||||
:to="getCompetenceNaviUrl(courseSession.course.slug)"
|
||||
|
|
@ -134,9 +136,9 @@ const profileRoute = {
|
|||
{{ $t("competences.title") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="hasLearningMentor" class="mb-2 flex">
|
||||
<li v-if="hasLearningMentor">
|
||||
<router-link
|
||||
class="w-full px-4 py-2"
|
||||
class="block w-full px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
data-cy="navigation-mobile-mentor-link"
|
||||
:to="getLearningMentorUrl(courseSession.course.slug)"
|
||||
|
|
@ -159,9 +161,9 @@ const profileRoute = {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="courseSession" class="mt-6 border-b">
|
||||
<ul>
|
||||
<li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
|
||||
<div v-if="courseSession" class="border-b px-4">
|
||||
<ul class="flex flex-col gap-2 py-6">
|
||||
<li v-if="courseSession && hasMediaLibraryMenu" class="flex">
|
||||
<router-link
|
||||
data-cy="medialibrary-link"
|
||||
class="flex w-full items-center gap-2 px-4 py-2"
|
||||
|
|
@ -173,7 +175,7 @@ const profileRoute = {
|
|||
{{ $t("a.Mediathek") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="courseSession && hasMediaLibraryMenu" class="mb-6 flex">
|
||||
<li v-if="courseSession && hasMediaLibraryMenu" class="flex">
|
||||
<router-link
|
||||
data-cy="calendar-link"
|
||||
class="flex w-full items-center gap-2 px-4 py-2"
|
||||
|
|
@ -188,11 +190,13 @@ const profileRoute = {
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 px-4 py-6">
|
||||
<router-link
|
||||
:to="settingsRoute"
|
||||
class="mt-6 flex w-full items-center gap-2 px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
v-if="user?.loggedIn"
|
||||
:to="settingsRoute"
|
||||
class="flex w-full items-center gap-2 px-4 py-2"
|
||||
active-class="bg-gray-200 text-blue-900 font-bold"
|
||||
type="button"
|
||||
>
|
||||
<it-icon-settings />
|
||||
|
|
@ -201,7 +205,7 @@ const profileRoute = {
|
|||
<button
|
||||
v-if="user?.loggedIn"
|
||||
type="button"
|
||||
class="mt-6 flex items-center px-4 py-2"
|
||||
class="flex items-center px-4 py-2"
|
||||
@click="$emit('logout')"
|
||||
>
|
||||
<it-icon-logout class="inline-block" />
|
||||
|
|
@ -210,5 +214,6 @@ const profileRoute = {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ItFullScreenModal>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue