<template>
    <section class="sidebar">
      <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>
    </section>
</template>



<script>

export default {
    name: "Navigationbar",
}

</script>
  
  
  
<style>

  * {
    box-sizing: border-box;
  }

  .sidebar {
    align-items: flex-start;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
    width: 200px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 10px;
    padding: 10px;
  }


  .toggle {
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    display: flex;
    height: 40px;
    padding: 10px;
  }
  


  .menus {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 40px 0;
    gap: 30px;
  }

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

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


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

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

  
  .label {
    color: #fff;
    /*leading-trim: both;
    text-edge: cap;*/
    letter-spacing: 0.7px;
    align-self: center;
    white-space: nowrap;
    margin: auto 0;
    font: 700 14px/20px Overpass, sans-serif;
  }

</style>