<template>
  <div class="app-wrapper" :class="classObj">
    <sidebar class="sidebar-container"/>
    <div class="main-container">
      <navbar></navbar>
      <app-main></app-main>
      <app-footer></app-footer>
      <back-to-top></back-to-top>
      <lock-view></lock-view>
    </div>
  </div>
</template>

<script>
  import AppFooter from './AppFooter'
  import resizeHandlerMixin from '../../../mixins/resizeHandlerMixin'
  import Navbar from './Navbar';
  import Sidebar from './Sidebar'
  import LockView from './LockView';
  import BackToTop from './BackToTop';

  export default {
    name: 'MainLayout',
    components: {BackToTop, LockView, Navbar, AppFooter, Sidebar},
    mixins: [resizeHandlerMixin],
    created: function () {
      // console.info(this.sidebar.withoutAnimation)
    },
    data () {
      return {}
    },
    computed: {
      sidebar () {
        return this.$store.state.app.sidebar
      },
      device () {
        return this.$store.state.app.device
      },
      locked () {
        return this.$store.state.app.locked
      },
      classObj () {
        return {
          hideSidebar: !this.sidebar.opened,
          // withoutAnimation: this.sidebar.withoutAnimation,
          mobile: this.device === 'mobile'
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-wrapper {
    //@include clearfix;
    position: absolute;
    height: 100%;
    width: 100%;
    /*background: #f0f2f5;*/
  }

</style>
