<template>
  <div :class="{ 'app-wrapper': true, 'sidebar-collapse': isCollapse }">
    <Sidebar class="sidebar-container" />
    <div class="main-container">
      <div class="fixed-haeder">
        <app-header />
      </div>
      <app-main />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Sidebar from './Sidebar'
import AppHeader from './header'
import AppMain from './main'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['sidebar']),
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  components: { Sidebar, AppHeader, AppMain }
}
</script>
<style scoped>
.app-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.sidebar-container {
  /* transition: width 0.28s; */
  width: 166px;
  height: 100%;
  position: fixed;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
.sidebar-collapse .sidebar-container {
  width: 54px;
}
.main-container {
  min-height: 100%;
  -webkit-transition: margin-left 0.28s;
  transition: margin-left 0.28s;
  margin-left: 166px;
  position: relative;
}
.sidebar-collapse .main-container {
  margin-left: 54px;
}
</style>
