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



<script>

export default {
  name: "Navigationbar",
  data() {
    return {
      darkMode: true,
      isExpanded: true,
      darkStylesImg: {
        filter: 'invert(100%)',
      },
      lightStylesImg: {
        filter: 'none',
      },
      darkStylesLabel: {
        color: '#fff',
      },
      lightStylesLabel: {
        color: '#000',
      },
    };
  },
  methods: {
    toggleSidebar() {
      this.isExpanded = !this.isExpanded;
    }
  }
}

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

aside {
  transition: 0.2s ease-out;
  display: flex;
  flex-direction: column;
  width: calc(2.5rem + 2.5rem);
  overflow: hidden;
}

aside.is-expanded {
  width: 238px;
  transition: 0.5s ease-out;
}

.is-expanded .label {
  opacity: 1;
  transition: 0.5s ease-out;
}

.is-not-expanded .darkStylesIcon {
  transform: rotate(180deg);
  transition: 0.5s ease-out;
}

.is-not-expanded .lightStylesIcon {
  transform: rotate(180deg);
  transition: 0.5s ease-out;
}


.navbar-dark {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  height: fit-content;
  border-radius: 10px;
  gap: 10px;
  padding: 15px;
  margin: 0;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background-color: #2c2c2c;
}

.navbar-light {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: fit-content;
  border-radius: 10px;
  gap: 10px;
  padding: 15px;
  margin: 0;
  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background-color: #FFFFFF;
}


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



.menus {
  display: flex;
  flex-direction: column;
  position: relative;
  transition: 0.2s ease-out;
  justify-content: flex;
  padding: 20px 0;
  gap: 30px;
}

nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  gap: 30px;
}

button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  height: 35px;
  border-radius: 5px;
  gap: 5px;
  border: none;
  background-color: #2c2c2c;
  transition-duration: 0.5s;
}

.dark-menu {
  background-color: #2c2c2c;
}

.light-menu {
  background-color: #FFFFFF;
}

.dark-menu:hover {
  background-color: #444444;
}

.light-menu:hover {
  background-color: #ACACAC;
}

.icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: 0.2s ease-out;
}

.lightStylesIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: 0.2s ease-out;
}

.darkStylesIcon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  transition: 0.2s ease-out;
}

#back-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  transition-duration: 0.5s;
  transition: 0.2s ease-out;
}

#indicator-icon {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  transition-duration: 0.5s;
  transition: transform 0.3s;
}

.lightStylesIcon:hover {
  background-color: #ACACAC;
}

.darkStylesIcon:hover {
  background-color: #444444;
}

.icon>img,
.lightStylesIcon>img,
.darkStylesIcon>img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  object-position: center;
  overflow: hidden;
  transition: 0.2s ease-out;
}

.dark-home-menu {
  border-bottom: 1px solid #8e8e8e;
}

.light-home-menu {
  border-bottom: 1px solid #BABABA;
}

.label {
  letter-spacing: 0.7px;
  align-self: center;
  white-space: nowrap;
  margin: auto 0;
  font: 600 14px/20px Overpass, sans-serif;
  opacity: 0;
  transition: opacity 0.5s ease-out; 
}
</style>