123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template>
- <div class="app-wrapper" :class="classObj">
- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
- <navbar></navbar>
-
- <div class="Header-container">
- <sidebar class="sidebar-container" @callBackIndex="handleIndex"></sidebar>
- <div class="main-container">
- <tags-view :index="index"></tags-view>
- <app-main></app-main>
- <contact-box></contact-box>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import { Navbar, Sidebar, AppMain, TagsView } from './components'
- import ContactBox from '@/scrm_pages/contactBox';
- import ResizeMixin from './mixin/ResizeHandler'
-
- export default {
- name: 'layout',
- components: {
- Navbar,
- Sidebar,
- AppMain,
- TagsView,
- ContactBox,
- },
- 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'
- }
- }
- },
- data(){
- return{
- index: 0,
- }
- },
- methods: {
- handleClickOutside() {
- this.$store.dispatch('closeSideBar', { withoutAnimation: false })
- },
- handleIndex(data) {
- // console.log({ prop: data });
- this.index = data;
- }
- }
- }
- </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>
|