| <!-- |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| |
| --> |
| <template> |
| <div :class="classObj" class="app-wrapper"> |
| <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
| <sidebar class="sidebar-container"/> |
| <div class="main-container"> |
| <navbar/> |
| <app-main/> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| import { Navbar, Sidebar, AppMain } from './components' |
| import ResizeMixin from './mixin/ResizeHandler' |
| |
| export default { |
| name: 'Layout', |
| components: { |
| Navbar, |
| Sidebar, |
| AppMain |
| }, |
| mixins: [ResizeMixin], |
| computed: { |
| sidebar() { |
| return this.$store.state.app.sidebar |
| }, |
| device() { |
| return this.$store.state.app.device |
| }, |
| classObj() { |
| return { |
| hideSidebar: !this.sidebar.opened, |
| openSidebar: this.sidebar.opened, |
| withoutAnimation: this.sidebar.withoutAnimation, |
| mobile: this.device === 'mobile' |
| } |
| } |
| }, |
| methods: { |
| handleClickOutside() { |
| this.$store.dispatch('closeSideBar', { withoutAnimation: false }) |
| } |
| } |
| } |
| </script> |
| |
| <style rel="stylesheet/scss" lang="scss" scoped> |
| @import "src/styles/mixin.scss"; |
| .app-wrapper { |
| @include clearfix; |
| position: relative; |
| height: 100%; |
| width: 100%; |
| &.mobile.openSidebar{ |
| position: fixed; |
| top: 0; |
| } |
| } |
| .drawer-bg { |
| background: #000; |
| opacity: 0.3; |
| width: 100%; |
| top: 0; |
| height: 100%; |
| position: absolute; |
| z-index: 999; |
| } |
| </style> |