70 lines
1.9 KiB
Vue
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>
|