<template>
  <div class="default" :class="theme">
    <div id="aside" class="page-sidenav">
      <div class="sidenav h-100 border-right">
        <div class="logo px-md-4 py-md-4 ">
          <a href="#" style="width:140px;height:40px;">
            <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">
                  <i class="fas fa-beer"></i>
                </div>
                <div class="nav-title flex-fill">导航首页</div>
              </div>
            </li>
            <li class="menu-item">
              <div class="nav-link">
                <div class="nav-icon"><i class="fas fa-flask"></i></div>
                <div class="nav-title flex-fill">前端技术</div>
              </div>
            </li>
            <li class="menu-item">
              <div class="nav-link">
                <div class="nav-icon"><i class="fas fa-wine-glass-alt"></i></div>
                <div class="nav-title flex-fill">导航首页</div>
              </div>
            </li>
          </ul>
        </div>
        <div>
          dsa
        </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;
  color: $dark-sidenav-bg;
  .page-sidenav {
    z-index: 1000;
    min-width: 200px;
    height: 100vh;
    color: var(--navbar-color);
    background:var(--navbar-background);
    .sidenav {
      display: flex;
      flex-direction: column;
      .logo{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .menu-item {
        list-style: none;
        .nav-link {
          position: relative;
          // font-size: 0.875rem;
          // padding: 0 0.75rem;
          display: flex;
          flex-wrap: nowrap;
          opacity: 0.6;
          cursor: pointer;
          &:hover {
            opacity: 1;
            background: var(--navbar-hover);
          }

          .nav-icon {
            width: 40px;
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .nav-title {
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .page-content {
    flex: 1 1 auto !important;
    min-height: 100vh;
     color: var(--navbar-color);
    background: var(--navbar-background);
  }
}
</style>
