<template>
  <div class="fp-main-container" :class="{'fp-collapse': AsideIsActived}">
    <fp-design-editor/>
    <fp-editor-bottom-bar />
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import FpDesignEditor from "./FpEditor";
import FpEditorBottomBar from "./FpEditorBottomBar";

export default {
  name: "FpMainContainer",
  components: {FpEditorBottomBar, FpDesignEditor},
  computed: {
    ...mapGetters({'AsideIsActived': 'aside/isActived'})
  }
}
</script>

<style scoped>

.fp-main-container {
  overflow: auto;
  background-color: #eef2f8;
  bottom: 0;
  z-index: 0;
  position: absolute;
  transition: left .28s ease;
  top: 55px;
  left: 66px;
  right: 276px;
}

.fp-main-container.fp-collapse {
  left: 393px;
}

</style>
