<template>
  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
    <div class="toggleNavbar">
      <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']">
        <router-link to="/home" class="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>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
          </Transition>
        </router-link>
      </nav>
      <nav id="site-menu">
        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" 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>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
          </Transition>
        </router-link>
        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" 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>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
          </Transition>
        </nuxt-link>
        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" 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>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
          </Transition>
        </router-link>
        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultIssueSlipPage()" 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>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
          </Transition>
        </router-link>
        <router-link to="/customers" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
          <div class="icon" id="customers-icon">
            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Customers-Icon.svg" />
          </div>
          <Transition name="fade">
            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
          </Transition>
        </router-link>
      </nav>
    </div>
  </aside>
</template>



<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';

const darkMode = ref(true)
const isExpanded = ref(true)

// get accesss to the store
const store = useStore()
const defaultAssetPage = () => {
  store.commit('resetStore');
  store.commit('changeToAssetlist');
};

const defaultMasterChecklistPage = () => {
  store.commit('resetStore');
  store.commit('changeToTemplatelist')
}

const defaultSolutionPage = () => {
  store.commit('resetStore');
  store.commit('changeToSolutionlist')
}

const defaultIssueSlipPage = () => {
  store.commit('resetStore');
  store.commit('changeToIssueSliplist')
}

const ToggleSidebar = () => {
  isExpanded.value = !isExpanded.value;
};
</script>

<script>
export default {
  name: "Navigationbar",
}
</script>
  
  
  
<style scoped>
* {
  box-sizing: border-box;
}

aside.navbar {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 3.75rem;
  height: fit-content;
  width: fit-content;
  inline-size: fit-content;
  border-radius: 0.625rem;
  flex: 0 0 0;
  align-items: stretch;
  justify-content: center;
  padding: 0.9375rem;
  gap: 0.625rem;
  overflow: clip;
  overflow-clip-margin: 0.625rem;
} 
aside.is-expanded {
  animation: expand 0.5s linear both;
} 
aside.is-not-expanded {
  animation: contract 0.5s linear both;
} 
.is-not-expanded #indicator-icon {
  transform: rotate(180deg);
  transition: 0.5s ease-in-out;
} 
.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;
}


.toggleNavbar {
  display: flex;
  flex-direction: row;
  height: 2.5rem;
  align-items: center;
  justify-content: space-between;
  overflow: clip;
  overflow-clip-margin: 0.625rem;
}


.menus {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  align-items: flex-start;
  justify-content: center;
  gap: 1.875rem;
  overflow: clip;
  overflow-clip-margin: 0.625rem;
}


nav {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 0.9375rem 0;
  align-items: flex-start;
  justify-content: center;
  gap: 1.875rem;
  overflow: clip;
  overflow-clip-margin: 0.625rem;
} 

.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }


.button,
a {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  height: 2.1875rem;
  border-radius: 0.625rem;
  align-items: center;
  justify-content: flex-start;
  border: none;
  text-decoration: none;
  transition: 0.2s ease-in-out;
  overflow: clip;
  overflow-clip-margin: 0.625rem;
} 
.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; }

.is-not-expanded>button { align-self: center; }


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


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


.label {
  display: inline-flex;
  min-width: 0;
  padding: 0rem 0.625rem 0rem 0.3125rem;
  align-self: center;
  letter-spacing: 0.03rem;
  white-space: nowrap;
  font: 600 0.875rem/1.25rem Overpass, sans-serif;
} 
.label-darkmode { color: #FFFFFF; } 
.label-lightmode { color: #000000; }



.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  padding: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
  padding: 0rem 0.625rem 0rem 0.3125rem;
}

.fade-enter-active {
  transition: all 0.75s linear;
  animation: fade-in 0.5s linear forwards;
}

.fade-leave-active {
  transition: all 0.75s linear;
  animation: fade-out 0.5s linear forwards;
}

.fade-move {
  transition: transform 5s
}

@keyframes expand {
  from {
    max-inline-size: 4.0625rem;
    max-width: 4.0625rem;
  }

  to {
    max-inline-size: 15rem;
    max-width: 15rem;
  }
}

@keyframes contract {
  from {
    max-inline-size: 15rem;
    max-width: 15rem;
  }

  to {
    max-inline-size: 4.0625rem;
    max-width: 4.0625rem;
  }
}

@keyframes fade-in {
  from {
    max-width: 0;
    max-inline-size: 0;
  }

  to {
    max-width: 10rem;
    width: fit-content;
  }
}

@keyframes fade-out {
  from {
    max-width: 10rem;
    width: fit-content;
  }

  to {
    max-width: 0;
    max-inline-size: 0;
  }
}
</style>