<template>
  <b-container fluid class="p-0">
    <navbar />
    <div>
      <sidebar v-show="$route.name !== 'Dashboard' &&  $route.name !== 'Deliver' && $route.name !== 'Memorabilia'" class="sidebar" />
    </div>
    <div
      :class="{
        openMainContent: ($route.name !== 'Dashboard' && $route.name !== 'Deliver' && $route.name !== 'Memorabilia') ? true : false,
        closeMainContent: ($route.name === 'Dashboard' || $route.name === 'Deliver' || $route.name === 'Memorabilia') ? true : false ,
      }"
      class="main-content"
    >
      <router-view></router-view>
    </div>
  </b-container>
</template>

<script>
import navbar from '@/views/HomePage/navbar.vue'
import sidebar from '@/views/HomePage/sidebar.vue'

export default {
  name: 'Homepage',

  data () {
    return {
      // claImg: require('../../assets/png/cal.png')
    }
  },
  components: {
    navbar,
    sidebar
  }
}
</script>

<style scoped>
.sidebar {
  top: 55px;
  position: fixed;
  background-color: #1d325f;
  height: calc(100vh - 55px);
  width: 200px;
  float: left;
}
.openMainContent {
  top: 55px;
  position: relative;
  left: 200px;
  background-color: rgb(255, 255, 255);
  height: calc(100vh - 55px);
  width: calc(100% - 200px);
  float: left;
}
.closeMainContent {
  top: 55px;
  position: relative;
  background-color: rgb(255, 255, 255);
  height: calc(100vh - 72px);
  width: 100%;
}
@media (max-width: 1028px) {
  .sidebar {
    margin-left: -200px;
  }
  .main-content {
    top: 55px;
    background-color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
    margin-left: -200px;
  }
}

</style>
