<template>
  <aside class="actionbar">
    <div class="icon" id="indicator-icon">
      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
    </div>
    <nav class="actions">
      <button id="search">
        <div class="icon" id="search-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
        </div>
        <pre class="label">Search</pre>
      </button>
      <button id="filter">
        <div class="icon" id="filter-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
        </div>
        <pre class="label">Filter</pre>
      </button>
      <button id="instances">
        <div class="icon" id="instances-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
        </div>
        <pre class="label">Instances</pre>
      </button>
      <button id="attachments">
        <div class="icon" id="attachments-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
        </div>
        <pre class="label">Attachments</pre>
      </button>
      <button id="sell">
        <div class="icon" id="sell-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
        </div>
        <pre class="label">Sell</pre>
      </button>
      <button id="archive">
        <div class="icon" id="archive-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
        </div>
        <pre class="label">Archive</pre>
      </button>
      <button id="new">
        <div class="icon" id="new-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
        </div>
        <pre class="label">New</pre>
      </button>
      <button id="edit">
        <div class="icon" id="edit-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
        </div>
        <pre class="label">Edit</pre>
      </button>
      <button id="delete">
        <div class="icon" id="delete-icon">
          <img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
        </div>
        <pre class="label">Delete</pre>
      </button>
    </nav>
  </aside>
</template>


<script>

export default {
    name: "Actionbar",
}

</script>



<style scoped>

  * {
    box-sizing: border-box;
  }


  .actionbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    border-radius: 10px;
    padding: 30px 10px;
    gap: 20px;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background-color: #2c2c2c;
  }


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


  button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 30px;
    border-radius: 10px;
    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: 30px;
    height: 30px;
  }
  #indicator-icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: #2c2c2c;
    transition-duration: 0.5s;
  }
  #indicator-icon:hover {
    background-color: #444444;
  }

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


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

</style>