<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>