mirror of
https://github.com/frappe/books.git
synced 2024-11-10 15:50:56 +00:00
86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
|
<div class="frappe-sidebar col-2 bg-light border-right">
|
|
<div class="navbar border-bottom navbar-title" @click="toggleDropdown">
|
|
<span class="d-flex align-items-center justify-content-between text-truncate w-100">
|
|
<div class="navbar-text text-truncate">
|
|
{{ title }}
|
|
</div>
|
|
<feather-icon style="height: 16px" name="chevron-down" />
|
|
</span>
|
|
<div :class="['dropdown-menu shadow w-100', showDropdown ? 'show' : '']">
|
|
<a
|
|
href="#"
|
|
class="dropdown-item"
|
|
v-for="option in sidebarConfig.titleDropdownItems"
|
|
:key="option.label"
|
|
@click.prevent="titleDropdownItemClick(option.handler)"
|
|
>
|
|
{{ option.label }}
|
|
</a>
|
|
</div>
|
|
</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: '',
|
|
showDropdown: false
|
|
}
|
|
},
|
|
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;
|
|
},
|
|
titleDropdownItemClick(handler) {
|
|
handler(this);
|
|
},
|
|
toggleDropdown(e) {
|
|
this.showDropdown = !this.showDropdown;
|
|
}
|
|
}
|
|
}
|
|
</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>
|