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

WIP: Add dummy mobile nav

This commit is contained in:
Christian Cueni 2022-08-04 15:34:17 +02:00
parent 01b042f01f
commit 03cd0fd32b
2 changed files with 84 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ import { useAppStore } from '@/stores/app';
import IconLogout from "@/components/icons/IconLogout.vue"; import IconLogout from "@/components/icons/IconLogout.vue";
import IconSettings from "@/components/icons/IconSettings.vue"; import IconSettings from "@/components/icons/IconSettings.vue";
import ItDropdown from "@/components/ui/ItDropdown.vue"; import ItDropdown from "@/components/ui/ItDropdown.vue";
import MobileMenu from "@/components/MobileMenu.vue"
log.debug('MainNavigationBar created'); log.debug('MainNavigationBar created');
@ -82,51 +83,67 @@ const profileDropdownData = [
</script> </script>
<template> <template>
<Teleport to="body">
<MobileMenu
:show="state.showMenu"
/>
</Teleport>
<Transition name="nav"> <Transition name="nav">
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()"> <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
<nav <nav
class=" class="
px-8 px-8
py-4 py-2
mx-auto mx-auto
lg:flex lg:justify-start lg:items-center lg:flex lg:justify-start lg:items-center lg:py-4
" "
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a <div class="flex items-center">
href="https://www.vbv.ch" <a
class="flex"> href="https://www.vbv.ch"
<it-icon-vbv class="h-8 w-16 -mt-6 -ml-3"/> class="flex">
</a> <it-icon-vbv class="h-8 w-16 mr-3 -mt-6 -ml-3"/>
<router-link </a>
to="/" <router-link
class="flex"> to="/"
<div class=" class="flex">
text-white <div class="
text-2xl
pr-10
pl-3
ml-1
border-l border-white
"
>
myVBV
</div>
</router-link>
<!-- Mobile menu button -->
<div @click="toggleNav" class="flex lg:hidden">
<button
type="button"
class="
w-8
text-white text-white
hover:text-sky-500 text-2xl
focus:outline-none focus:text-sky-500 pr-10
pl-3
ml-1
border-l border-white
" "
>
myVBV
</div>
</router-link>
</div>
<div class="flex items-center">
<router-link
to="/messages"
class="nav-item flex flex-row items-center"
> >
<it-icon-menu class="h-8 w-8"/> <it-icon-message class="w-8 h-8 mr-6"/>
</button> </router-link>
<!-- Mobile menu button -->
<div @click="toggleNav" class="flex lg:hidden">
<button
type="button"
class="
w-8
h-8
text-white
hover:text-sky-500
focus:outline-none focus:text-sky-500
"
>
<it-icon-menu class="h-8 w-8"/>
</button>
</div>
</div> </div>
</div> </div>
@ -162,7 +179,6 @@ const profileDropdownData = [
Kompetenzprofil Kompetenzprofil
</router-link> </router-link>
<hr class="text-white lg:hidden">
<div class="hidden lg:block flex-auto"></div> <div class="hidden lg:block flex-auto"></div>
<router-link <router-link
to="/shop" to="/shop"
@ -178,12 +194,6 @@ const profileDropdownData = [
> >
Mediathek Mediathek
</router-link> </router-link>
<router-link
to="/messages"
class="nav-item flex flex-row items-center"
>
<it-icon-message class="w-8 h-8 mr-2"/>
</router-link>
<div class="nav-item flex items-center" v-if="userStore.loggedIn"> <div class="nav-item flex items-center" v-if="userStore.loggedIn">
<ItDropdown <ItDropdown
:button-classes="[]" :button-classes="[]"

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

@ -0,0 +1,34 @@
<script setup lang="ts">
</script>
<template>
<div>
<div>
<div>
<img>
<div>
<h3>Jan</h3>
link
</div>
</div>
<div>
<h4>Kurs:</h4>
<ul>
<li>Lernpfad</li>
<li>Komp</li>
</ul>
</div>
<div>
<ul>
<li>Shop</li>
<li>Mediathek</li>
</ul>
</div>
<div>
Abmelden
</div>
</div>
</div>
</template>