169 lines
4.3 KiB
Vue
169 lines
4.3 KiB
Vue
<script setup>
|
|
import * as log from 'loglevel';
|
|
|
|
import { reactive } from 'vue';
|
|
import { useUserStore } from '@/stores/user';
|
|
import { useRoute } from 'vue-router';
|
|
import { useAppStore } from '@/stores/app';
|
|
|
|
log.debug('MainNavigationBar.vue created');
|
|
|
|
const route = useRoute()
|
|
const userStore = useUserStore();
|
|
const appStore = useAppStore();
|
|
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'] : [];
|
|
}
|
|
|
|
function menuActive(checkPath) {
|
|
return route.path.startsWith(checkPath);
|
|
}
|
|
|
|
function inLearningPath() {
|
|
return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
|
|
}
|
|
|
|
function backButtonUrl() {
|
|
if (route.path.startsWith('/circle/')) {
|
|
return '/learningpath/versicherungsvermittlerin';
|
|
}
|
|
|
|
return '/';
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
|
|
<nav
|
|
class="
|
|
px-8
|
|
py-4
|
|
mx-auto
|
|
lg:flex lg:justify-start lg:items-center
|
|
"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<router-link
|
|
to="/" class="flex">
|
|
<it-icon-vbv class="h-8 w-16 -mt-3 -ml-3"/>
|
|
<div class="
|
|
text-white
|
|
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
|
|
hover:text-sky-500
|
|
focus:outline-none focus:text-sky-500
|
|
"
|
|
>
|
|
<it-icon-menu class="h-8 w-8"/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
|
<div
|
|
: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
|
|
"
|
|
>
|
|
<router-link
|
|
v-if="userStore.loggedIn && !inLearningPath()"
|
|
to="/"
|
|
class="nav-item"
|
|
:class="{'nav-item--active': route.path === '/'}"
|
|
>
|
|
Cockpit
|
|
</router-link>
|
|
<router-link
|
|
v-if="userStore.loggedIn && !inLearningPath()"
|
|
to="/shop"
|
|
class="nav-item"
|
|
:class="{'nav-item--active': menuActive('/shop')}"
|
|
>
|
|
Shop
|
|
</router-link>
|
|
|
|
<router-link
|
|
v-if="userStore.loggedIn && inLearningPath()"
|
|
to="/learningpath/versicherungsvermittlerin"
|
|
class="nav-item"
|
|
:class="{'nav-item--active': menuActive('/learningpath/')}"
|
|
>
|
|
Lernpfad
|
|
</router-link>
|
|
|
|
<hr class="text-white lg:hidden">
|
|
<div class="hidden lg:list-item flex-auto"></div>
|
|
<router-link
|
|
v-if="userStore.loggedIn"
|
|
to="/mediacenter"
|
|
class="nav-item"
|
|
:class="{'nav-item--active': menuActive('/mediacenter')}"
|
|
>
|
|
Mediathek
|
|
</router-link>
|
|
<router-link
|
|
v-if="userStore.loggedIn"
|
|
to="/messages"
|
|
class="nav-item flex flex-row items-center"
|
|
>
|
|
<it-icon-message class="w-8 h-8 mr-2"/>
|
|
</router-link>
|
|
<router-link
|
|
to="/profile"
|
|
class="nav-item flex items-center"
|
|
>
|
|
<div v-if="userStore.loggedIn">
|
|
<div v-if="userStore.avatar_url">
|
|
<img class="inline-block h-8 w-8 rounded-full"
|
|
:src="userStore.avatar_url"
|
|
alt=""/>
|
|
</div>
|
|
<div v-else>
|
|
{{ userStore.getFullName }}
|
|
</div>
|
|
</div>
|
|
<div v-else><a class="" href="/login">Login</a></div>
|
|
</router-link>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="postcss" scoped>
|
|
.nav-item {
|
|
@apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
|
|
}
|
|
|
|
.nav-item--active {
|
|
@apply underline underline-offset-[21px] decoration-sky-500 decoration-4
|
|
}
|
|
</style>
|