<template>
  <div class="default">
    <div id="aside" class="page-sidenav" :class="theme">
      <div class="sidenav">
        <div class="logo px-md-4 py-md-4">
          <a href="#" class="navbar-brand" style="width:140px;">
            <img v-if="theme=='light'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo.png" alt="nicetheme">
            <img v-if="theme=='dark'" src="https://theme.nicetheme.xyz/lighthouse/wp-content/themes/Lighthouse-1.0.1/images/logo-dark.png" alt="nicetheme">
          </a>
        </div>
      </div>
    </div>
    <div class="page-content" :class="theme">
      <nuxt />
    </div>
  </div>
</template>
<script>
// https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
export default {
  components: {},
  mounted(){
    console.log(this);
    
  },
  computed:{
    theme(){
      return this.$store.getters.theme
    }
  }
};
</script>
<style lang="scss" scoped>

.default {
  display: flex;
  .page-sidenav {
    z-index: 1000;
    min-width: 13rem;
    height: 100vh;
    &.light{
      background-color: #f4f6fb;
    }
    &.dark{
      background-color: #000000;
    }
  }
  .page-content {
    flex: 1 1 auto!important;
    min-height: 100vh;
    &.light{
      background-color: #ffffff;
    }
    &.dark{
      background-color: #000000;
    }
  }
}
</style>