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

Add responsive menu

This commit is contained in:
Daniel Egger 2022-06-01 11:53:03 +02:00
parent cd676bbe96
commit a2044470ca
1 changed files with 77 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,18 +1,82 @@
<script> <script setup>
export default {
name: "MainNavigationBar" import { reactive } from 'vue';
const state = reactive({showMenu: false});
function toggleNav() {
console.log(state.showMenu);
state.showMenu = !state.showMenu;
} }
function calcNavigationMobileOpenClasses() {
return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
}
</script> </script>
<template> <template>
<nav class="bg-blue-900 flex flex-row gap-x-8 items-center text-white px-8 py-4"> <div class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
<a href="" class="text-xl">myVBV</a> <nav
<a href="" class="">Lernpfad</a> class="
<a href="" class="">Kompetenzprofil</a> px-8
<a href="" class="">Berufstypische Situationen</a> py-4
mx-auto
lg:flex lg:justify-start lg:items-center
"
>
<div class="flex items-center justify-between">
<router-link
to="/"
class="
font-bold
text-white
text-2xl
hover:text-sky-500
pr-10
"
>myVBV
</router-link>
<!-- Mobile menu button -->
<div @click="toggleNav" class="flex lg:hidden">
<button
type="button"
class="
text-white
hover:text-sky-500
focus:outline-none focus:text-sky-500
"
>
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path
fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<ul
:class="state.showMenu ? 'flex' : 'hidden'"
class="
flex-auto
flex-col
mt-8
space-y-8
lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
"
>
<li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Lernpfad</li>
<li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Kompetenzprofil</li>
<hr class="text-white lg:hidden">
<li class="hidden lg:list-item flex-auto"></li>
<li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Mediathek</li>
<li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Netzwerk</li>
<li class="text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal">Jan Baumgartner</li>
</ul>
</nav> </nav>
</div>
</template> </template>
<style scoped>
</style>