febc4bef83
* [Enhancement] Hide sidebar on tablets * Remove unnecessary console.log * Use beforeDestroy
73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<template>
|
|
<div class="row app-wrapper">
|
|
<sidebar :route="currentRoute" :class="sidebarClassName"></sidebar>
|
|
<section class="app-content columns" :class="contentClassName">
|
|
<router-view></router-view>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* global bus */
|
|
import Sidebar from '../../components/layout/Sidebar';
|
|
|
|
export default {
|
|
components: {
|
|
Sidebar,
|
|
},
|
|
props: {
|
|
mainViewComponent: String,
|
|
sidebarMenu: String,
|
|
page: String,
|
|
},
|
|
data() {
|
|
return {
|
|
isSidebarOpen: false,
|
|
isOnDesktop: true,
|
|
};
|
|
},
|
|
computed: {
|
|
currentRoute() {
|
|
return ' ';
|
|
},
|
|
sidebarClassName() {
|
|
if (this.isOnDesktop) {
|
|
return '';
|
|
}
|
|
if (this.isSidebarOpen) {
|
|
return 'off-canvas is-open ';
|
|
}
|
|
return 'off-canvas position-left is-transition-push is-closed';
|
|
},
|
|
contentClassName() {
|
|
if (this.isOnDesktop) {
|
|
return '';
|
|
}
|
|
if (this.isSidebarOpen) {
|
|
return 'off-canvas-content is-open-left has-transition-push has-position-left';
|
|
}
|
|
return 'off-canvas-content';
|
|
},
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', this.handleResize);
|
|
this.handleResize();
|
|
bus.$on('sidemenu_icon_click', () => {
|
|
this.isSidebarOpen = !this.isSidebarOpen;
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.handleResize);
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
if (window.innerWidth > 1200) {
|
|
this.isOnDesktop = true;
|
|
} else {
|
|
this.isOnDesktop = false;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|