127 lines
3.8 KiB
Vue
127 lines
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar flat class="primary" height="65px">
|
|
<div class="toolbar d-flex justify-space-between white--text">
|
|
<div class="d-flex align-center">
|
|
<div class="application-logo-container mt-1">
|
|
</div>
|
|
<div class="application-name ml-6 mr-12">
|
|
<template>
|
|
{{ applicationName }}
|
|
</template>
|
|
</div>
|
|
<div class="navigation-container d-flex">
|
|
<div
|
|
class="nav-item nav-hover mx-3"
|
|
v-for="item in navigationItems"
|
|
v-bind:key="item.routerName"
|
|
v-bind:class="{
|
|
itemSelected: selectedNavItem === item.routerName
|
|
}"
|
|
@click="
|
|
item.dropdownOptions.length === 0 ? onNavItemClick(item) : {}
|
|
"
|
|
>
|
|
<v-menu offset-y>
|
|
<template v-slot:activator="{ on }">
|
|
<div
|
|
class="fill-height d-flex align-center justify-center px-3"
|
|
v-on="on"
|
|
>
|
|
<v-icon class="white--text mr-2">{{ item.icon }}</v-icon>
|
|
<div>{{ item.title }}</div>
|
|
<v-icon
|
|
v-if="item.dropdownOptions.length > 0"
|
|
class="white--text ml-2"
|
|
>
|
|
mdi-chevron-down
|
|
</v-icon>
|
|
</div>
|
|
</template>
|
|
<v-list v-if="item.dropdownOptions.length > 0" :dense="true">
|
|
<div
|
|
v-for="(dropdownItem, index) in item.dropdownOptions"
|
|
:key="index"
|
|
>
|
|
<v-list-item @click="onNavItemClick(dropdownItem)">
|
|
<v-icon class="mr-6 primary--text">
|
|
{{ dropdownItem.icon }}
|
|
</v-icon>
|
|
<v-list-item-title>{{
|
|
$t(dropdownItem.title)
|
|
}}</v-list-item-title>
|
|
</v-list-item>
|
|
<v-divider
|
|
class="mr-3 ml-3"
|
|
v-if="index < item.dropdownOptions.length - 1"
|
|
>
|
|
</v-divider>
|
|
</div>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-center"></div>
|
|
</div>
|
|
</v-toolbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Watch } from 'vue-property-decorator';
|
|
import { NavigationItemInterface } from '@/interfaces/NavigationItem.interface';
|
|
import { NavigationItemStorage } from '@/helper/NavigationItemStorage';
|
|
|
|
@Component({})
|
|
export default class NavigationView extends Vue {
|
|
public applicationName: string = process.env.VUE_APP_TITLE!;
|
|
private navigationItems: NavigationItemInterface[] = [];
|
|
private selectedNavItem = 'companyDashboard';
|
|
|
|
/**
|
|
* On click handler that activates a route
|
|
* @param item
|
|
*/
|
|
public onNavItemClick(item: any) {
|
|
switch (item.routerName) {
|
|
case 'createCustomer':
|
|
break;
|
|
case 'createUser':
|
|
break;
|
|
case 'createCompany':
|
|
break;
|
|
default:
|
|
this.selectedNavItem = item.routerName;
|
|
this.$router.push({ name: item.routerName });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Watch the route url for changing the navigation bar
|
|
*/
|
|
@Watch('$route', { immediate: true, deep: true })
|
|
private onUrlChange(routerValue: any) {
|
|
if (routerValue.name) {
|
|
this.selectedNavItem = routerValue.name;
|
|
}
|
|
this.setNavigationItems();
|
|
}
|
|
|
|
/**
|
|
* Determines the navigation items regarding the current user role
|
|
*/
|
|
private setNavigationItems() {
|
|
this.navigationItems = NavigationItemStorage;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.navigation-container {
|
|
height: 65px;
|
|
}
|
|
|
|
</style>
|