<template>
  <div class="default">
    <div id="aside" class="page-sidenav" :class="theme">
      <div class="sidenav h-100">
        <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 class="flex-fill scrollable hover py-lg-0">
          <ul>
            <li class="menu-item">
              <div class="nav-link">
                <div class="nav-icon">sa</div>
              </div>
            </li>
            <li class="menu-item">
              <div class="nav-link">sda</div>
            </li>
            <li class="menu-item">
              <div class="nav-link">sda</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="page-content" :class="theme">
      <nuxt />
    </div>
  </div>
</template>
<script>
// https://theme.nicetheme.xyz/lighthouse/sample-page
// 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;
    }
    .sidenav {
      display: flex;
      flex-direction: column;
      .menu-item {
        list-style: none;
        .nav-link {
          position: relative;
          font-size: 0.875rem;
          padding: 0 0.75rem;
          display: -ms-flexbox;
          display: flex;
          flex-wrap: nowrap;
          opacity: 0.6;
          .nav-icon{
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }
  .page-content {
    flex: 1 1 auto !important;
    min-height: 100vh;
    &.light {
      background-color: #ffffff;
    }
    &.dark {
      background-color: #000000;
    }
  }
}
</style>