seepur/resources/scripts/applications/shared/components/SideBar/SideBar.vue
2020-02-09 10:17:11 -05:00

70 lines
1.9 KiB
Vue

<template>
<div>
<div class="section">
<div class="menu-titles">
<router-link to="/" class>
<SidewayText textSize="is-size-6" :text="appName" :bold="true" />
</router-link>
<SidewayText class="is-size-6" :text="selectedItem" />
<!-- <div class="is-size-6 has-text-weight-bold m-l-lg m-r-md">{{appName}}</div> -->
</div>
<aside class="menu is-primary sidebar-menu">
<ul class="menu-list">
<li v-for="item in menu" class="m-t-md m-b-md" @click="onItemClicked(item)">
<router-link
active-class="is-active"
v-if="item.isRouterLink"
:to="item.href"
class="button"
exact
:title="item.text"
>
<i :class="['icon', item.icon]"></i>
</router-link>
<a
v-else
:href="item.href"
:title="item.text"
:class="['button',{ 'is-active': !!item.isActive }]"
>
<i :class="['icon', item.icon]"></i>
</a>
</li>
</ul>
</aside>
</div>
<!-- <div class="is-hidden-desktop">texts</div> -->
</div>
</template>
<script lang="ts" >
import SidewayText from "../SidewayText/SidewayText.vue";
export interface IMenuItem {
href: string;
text: string;
icon: string;
isRouterLink: boolean;
}
export default {
components: {
SidewayText
},
beforeCreate() {},
created() {
let currentPage = this.$router.currentRoute.path.split("/")[1];
if (currentPage) currentPage[0].toUpperCase;
else currentPage = this.menu[0].text;
this.selectedItem = currentPage;
},
methods: {
onItemClicked(item: IMenuItem) {
this.selectedItem = item.text;
}
},
data: () => ({
selectedItem: ""
}),
name: "SideBar",
props: ["menu", "title", "appName"]
};
</script>