mirror of
https://github.com/frappe/books.git
synced 2024-11-13 00:46:28 +00:00
69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div class="frappe-sidebar col-2 bg-light border-right">
|
|
<div class="navbar border-bottom navbar-title" @click="onNavbarTitleClick">
|
|
<div class="navbar-text">
|
|
{{ title }}
|
|
</div>
|
|
<feather-icon class="mt-1" name="chevron-down" />
|
|
</div>
|
|
<div class="my-3" v-for="(sidebarGroup, index) in sidebarConfig.groups" :key="index">
|
|
<h6 v-if="sidebarGroup.title" class="sidebar-heading nav-link text-muted text-uppercase m-0">
|
|
{{ sidebarGroup.title }}
|
|
</h6>
|
|
<nav class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a v-for="item in sidebarGroup.items" :key="item.route"
|
|
:href="item.route"
|
|
:class="['nav-link', isActive(item) ? 'text-light bg-secondary' : 'text-dark']" >
|
|
{{ item.label }}
|
|
</a>
|
|
</li>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['sidebarConfig'],
|
|
data() {
|
|
return {
|
|
title: ''
|
|
}
|
|
},
|
|
async created() {
|
|
this.title = await this.sidebarConfig.getTitle();
|
|
},
|
|
methods: {
|
|
isActive(item) {
|
|
if (this.$route.params.doctype) {
|
|
return this.$route.params.doctype === item.label;
|
|
}
|
|
const route = item.route.slice(1);
|
|
return this.$route.path === route;
|
|
},
|
|
onNavbarTitleClick() {
|
|
this.sidebarConfig.onTitleClick(this);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../styles/variables";
|
|
|
|
.frappe-sidebar {
|
|
min-height: calc(100vh);
|
|
}
|
|
|
|
.sidebar-heading {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.navbar-title {
|
|
cursor: pointer;
|
|
}
|
|
.navbar-title:hover {
|
|
background-color: $gray-200;
|
|
}
|
|
</style>
|