<template>
    <aside class="navbar">
      <div class="toggle">
        <div class="icon"  id="back-icon">
          <img loading="lazy" src="../icons/Back-Icon.svg"/>
        </div>
        <div class="icon" id="indicator-icon">
          <img loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg"/>
        </div>
      </div>
      <div class="menus">
        <nav id="home-menu">
          <button id="home-button">
            <div class="icon" id="home-icon">
              <img loading="lazy" src="../icons/navbar-icons/Home-Icon.svg"/>
            </div>
            <pre class="label">Home</pre>
          </button>
        </nav>
        <nav id="site-menu">
          <button id="checklists-button">
            <div class="icon" id="checklists-icon">
              <img loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg"/>
              </div>
            <pre class="label">Checklists</pre>
          </button>
          <button id="assets-button">
            <div class="icon" id="assets-icon">
              <img loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg"/>
            </div>
            <pre class="label">Config Items</pre>
          </button>
          <button id="solutions-button">
            <div class="icon" id="solutions-icon">
              <img loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg"/>
            </div>
            <pre class="label">Solutions</pre>
          </button>
          <button id="accounting-button">
            <div class="icon" id="accounting-icon">
              <img loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg"/>
            </div>
            <pre class="label">Accounting</pre>
          </button>
          <button id="clients-button">
            <div class="icon" id="clients-icon">
              <img loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg"/>
            </div>
            <pre class="label">Clients</pre>
          </button>
        </nav>
      </div>
    </aside>
</template>



<script>

export default {
    name: "Navigationbar",
}

</script>
  
  
  
<style scoped>

* {
  box-sizing: border-box;
}

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


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


  .menus {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 20px 0;
    gap: 30px;
  }

  nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 10px;
    gap: 30px;
  }
  #home-menu {
    border-bottom: 1px solid #8e8e8e;
  }

  
  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;
  }
  button:hover {
    background-color: #444444;
  }


  .icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
  }
  #indicator-icon, #back-icon {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: #2c2c2c;
    transition-duration: 0.5s;
  }
  #indicator-icon:hover, #back-icon:hover {
    background-color: #444444;
  }

  .icon > img {
    width: 20px;
    height: 20px;
    filter: invert(100%);
    object-fit: contain;
    object-position: center;
    overflow: hidden;
  }

  
  .label {
    color: #fff;
    letter-spacing: 0.7px;
    align-self: center;
    white-space: nowrap;
    margin: auto 0;
    font: 600 14px/20px Overpass, sans-serif;
  }

</style>