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

Style mobile menu

This commit is contained in:
Christian Cueni 2022-08-08 09:54:57 +02:00
parent 1e2bc078cd
commit 75fc75616d
2 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/MainNavigationBar.vue
View File

@ -88,7 +88,6 @@ const profileDropdownData = [
<div> <div>
<Teleport to="body"> <Teleport to="body">
<MobileMenu <MobileMenu
v-if="learningPathName()"
:user="userStore" :user="userStore"
:show="state.showMenu" :show="state.showMenu"
:learning-path-name="learningPathName()" :learning-path-name="learningPathName()"

34
client/src/components/MobileMenu.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue' import ItFullScreenModal from '@/components/ui/ItFullScreenModal.vue'
import IconLogout from '@/components/icons/IconLogout.vue'
import IconSettings from '@/components/icons/IconSettings.vue'
const props = defineProps<{ const props = defineProps<{
show: boolean, show: boolean,
@ -18,32 +20,40 @@ const emits = defineEmits(['closemodal'])
> >
<div> <div>
<div> <div>
<div> <div class="flex border-b border-gray-500 -mx-8 px-8 pb-4">
<div v-if="user.avatar_url"> <div v-if="user.avatar_url">
<img class="inline-block h-8 w-8 rounded-full" <img class="inline-block h-16 w-16 rounded-full"
:src="user.avatar_url" :src="user.avatar_url"
alt=""/> alt=""/>
</div> </div>
<div> <div class="ml-6">
<h3>{{user.first_name}} {{user.last_name}}</h3> <h3>{{user.first_name}} {{user.last_name}}</h3>
<a>Kontoeinstellungen</a> <RouterLink
to="/profil"
class="mt-2 inline-block items-center">
<IconSettings class="inline-block" /><span class="ml-3">Kontoeinstellungen</span>
</RouterLink>
</div> </div>
</div> </div>
<div v-if="learningPathName"> <div>
<h4>Kurs: {{learningPathName}}</h4> <div
<ul> class="mt-6 pb-6 border-b border-gray-500"
v-if="learningPathName">
<h4 class="text-gray-900 text-sm">Kurs: {{learningPathName}}</h4>
<ul class="mt-6">
<li>Lernpfad</li> <li>Lernpfad</li>
<li>Komp</li> <li class="mt-6">Komp</li>
</ul> </ul>
</div> </div>
<div> <div class="mt-6 pb-6 border-b border-gray-500">
<ul> <ul>
<li>Shop</li> <li>Shop</li>
<li>Mediathek</li> <li class="mt-6">Mediathek</li>
</ul> </ul>
</div> </div>
<div> <div class="mt-6 items-center">
Abmelden <IconLogout class="inline-block" /><span class="ml-1">Abmelden</span>
</div>
</div> </div>
</div> </div>
</div> </div>