rt-sim-training-client/src/layout/index.vue

<template>
  <div class="app-wrapper" :class="classObj">
    <div class="main-container">
      <navbar />
      <app-main :style="{width: width+'px', height: height+'px'}" />
    </div>
  </div>
</template>

<script>
import { Navbar, AppMain } from './components'; // Sidebar

export default {
	name: 'Layout',
	components: {
		Navbar,
		AppMain
	},
	data() {
		return {
		};
	},
	computed: {
		sidebar() {
			return this.$store.state.app.sidebar;
		},
		device() {
			return this.$store.state.app.device;
		},
		classObj() {
			return {
				withoutAnimation: this.sidebar.withoutAnimation,
				mobile: this.device === 'mobile'
			};
		},
		width() {
			return this.$store.state.app.width;
		},
		height() {
			return this.$store.state.app.height - 60;
		}
	},
	created() {
		this.watchRouterUpdate();
	},
	methods: {
		handleClickOutside() {
			this.$store.dispatch('CloseSideBar', { withoutAnimation: false });
		},
		watchRouterUpdate() {
			this.$router.beforeEach((to, from, next) => {
				next();
			});
		}
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .app-wrapper {
        @include clearfix;
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    .drawer-bg {
        background: #000;
        opacity: 0.3;
        width: 100%;
        left: 0;
        top: 0;
        height: 100%;
        position: absolute;
        z-index: 999;
    }
</style>