<template>
  <div class="app-wrapper">
    <navbar />
    <div class="appMain">
      <app-main />
    </div>
  </div>
</template>
<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    })
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #F2F6FC;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.appMain {
  height: calc(100vh - 80px);
  width: 80%;
  margin: 0 auto;
  background-color: #fff;

  .app-main {
    height: 100%;
  }
}
</style>