<template lang="pug">
  .app
    el-container
      el-aside(:width="asideWidth")
        sidebar
      el-container
        el-header(height='118px')
          Header
          Breadcrumb
        el-main
          AppMain
</template>
<script>
import { Sidebar, AppMain, Header } from './components'
import Breadcrumb from './components/breadcrumb'

import { mapState } from 'vuex'
export default {
  name: 'Layout',
  components: {
    Sidebar,
    Header,
    AppMain,
    Breadcrumb
  },
  computed: {
    ...mapState('app', ['sidebar']),
    siderbar() {
      return this.$store.state.app.siderbar
    },
    asideWidth() {
      return this.sidebar.opened ? '64px' : '256px'
    }
  }
}
</script>
<style lang="scss" scope>
.app {
  height: 100%;
  > .el-container {
    height: 100%;
  }
  .el-header {
    padding: 0;
  }
  .el-main {
    padding: 24px 24px 0 24px;
    background-color: #f0f2f5;
  }
  .el-aside {
    transition: width 0.2s ease-in;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
  }
}
</style>