<template>
  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
    <div class="toggle">
      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode' ]" id="back-icon">
        <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
          loading="lazy" src="../icons/Back-Icon.svg" />
      </div>
      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleSidebar">
        <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
          loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
      </div>
    </div>
    <div class="menus">
      <nav id="home-menu" :class="[ darkMode ? 'menu-darkmode' : 'menu-lightmode' ]">
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="home-button">
          <div class="icon" id="home-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Home</pre>
        </button>
      </nav>
      <nav id="site-menu">
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="checklists-button">
          <div class="icon" id="checklists-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Checklists</pre>
        </button>
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="assets-button">
          <div class="icon" id="assets-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Config Items</pre>
        </button>
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="solutions-button">
          <div class="icon" id="solutions-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Solutions</pre>
        </button>
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="accounting-button">
          <div class="icon" id="accounting-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Accounting</pre>
        </button>
        <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="clients-button">
          <div class="icon" id="clients-icon">
            <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" 
              loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
          </div>
          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Clients</pre>
        </button>
      </nav>
    </div>
  </aside>
</template>



<script>

export default {
  name: "Navigationbar",
  data() {
    return {
      darkMode: true,
      isExpanded: true,
    };
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded;
    }
  }
}

</script>
  
  
  
<style scoped>
* {
  box-sizing: border-box;
}

aside {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 5rem;
  width: 3.125rem;
  transition: 0.5s ease-in-out;
}
aside.is-expanded {
  width: 12.5rem;
}

.is-expanded .label {
  opacity: 1;
  transition: 0.5s ease-in-out;
}
.is-not-expanded #indicator-icon {
  transform: rotate(180deg);
  transition: 0.5s ease-in-out;
}


.navbar {
  display: flex;
  flex-direction: column;
  height: fit-content;
  border-radius: 0.625rem;
  align-items: stretch;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.9375rem;
  margin: 0;
}
.navbar-darkmode {
  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  background-color: #2C2C2C;
}
.navbar-lightmode {
  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
  background-color: #FFFFFF;
}


.toggle {
  display: flex;
  flex-direction: row;
  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
}


.menus {
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: flex;
  padding: 1.25rem 0;
  gap: 1.875rem;
  transition: 0.5s ease-in-out;
}


nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9375rem 0;
  gap: 1.875rem;
}
.menu-darkmode {
  border-bottom: 0.0625rem solid #8E8E8E;
}
.menu-lightmode {
  border-bottom: 0.0625rem solid #BABABA;
}



button {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  height: 2.1875rem;
  border-radius: 0.3125rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3125rem;
  border: none;
  transition: 0.5s ease-in-out;
}
.button-darkmode {
  background-color: #2C2C2C;
}
.button-lightmode {
  background-color: #FFFFFF;
}
.button-darkmode:hover, 
.indicator-darkmode:hover,
.back-darkmode:hover {
  background-color: #444444;
}

.button-lightmode:hover, 
.indicator-lightmode:hover,
.back-lightmode:hover {
  background-color: #ACACAC;
}


.icon {
  display: flex;
  flex-direction: row;
  width: 2.1875rem;
  height: 2.1875rem;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease-in-out;
}
#back-icon, #indicator-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.3125rem;
  transition-duration: 0.5s;
  transition: 0.2s ease-out;
}


img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  transition: 0.2s ease-out;
}
.img-darkmode {
  filter: invert(100%);
}

.label {
  letter-spacing: 5%;
  align-self: center;
  white-space: nowrap;
  margin: auto 0;
  font: 600 0.875rem/1.25rem Overpass, sans-serif;
  opacity: 0;
  transition: opacity 0.5s ease-out; 
}
.label-darkmode {
  color: #FFFFFF;
}
.label-lightmode {
  color: #000000;
}
</style>