<template>
  <div id="wrapper" class="d-flex" :class="{ 'toggled': !sidebarShow }">
    <sidebar />
    <div id="page-content-wrapper">
      <main-header />
      <div class="container-fluid">
        <transition name="fade">
          <router-view />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from '../containers/Sidebar'
import MainHeader from '../containers/MainHeader'
import { mapGetters } from 'vuex'
export default {
  name: 'PanelLayout',
  components: {
    Sidebar, MainHeader
  },
  computed: mapGetters({
    sidebarShow: 'ui/sidebarShow'
  })
}
</script>

<style scoped>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>