add actionbar

layouts/Actionbar.vue

@@ -1,5 +1,156 @@
 <template>
-    <NuxtLayout>
+  <aside class="actionbar">
-      <NuxtPage />
+    <div class="icon" id="indicator-icon">
-    </NuxtLayout>
+      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
-  </template>
+    </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>
+
+
+
+<style>
+
+  * {
+    box-sizing: border-box;
+  }
+
+
+  .actionbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    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;
+    justify-content: center;
+    align-items: stretch;
+    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;
+    padding: 10px;
+  }
+  #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: 10px;
+    height: 10px;
+    filter: invert(100%);
+    object-fit: contain;
+    object-position: center;
+    overflow: hidden;
+  }
+  #indicator-icon > img {
+    width: auto;
+  }
+
+
+  .label {
+    color: #fff;
+    letter-spacing: 0.7px;
+    align-self: stretch;
+    white-space: nowrap;
+    font: 400 14px/20px Overpass, sans-serif;
+  }
+  
+
+</style>

layouts/Navigationbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="sidebar">
+    <aside class="sidebar">
       <div class="toggle">
         <div class="icon"  id="back-icon">
           <img loading="lazy" src="../icons/Back-Icon.svg"/>
@@ -50,7 +50,7 @@
           </button>
         </nav>
       </div>
-    </section>
+    </aside>
 </template>
 
 
@@ -72,23 +72,24 @@ export default {
   }
 
   .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;
+    align-items: stretch;
+    justify-content: center;
+    width: 200px;
     border-radius: 10px;
-    gap: 10px;
     padding: 10px;
+    gap: 10px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    background-color: #2c2c2c;
   }
 
 
   .toggle {
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
     display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
     height: 40px;
     padding: 10px;
   }
@@ -96,20 +97,19 @@ export default {
 
 
   .menus {
-    align-items: flex-start;
-    align-self: stretch;
     display: flex;
     flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
     padding: 40px 0;
     gap: 30px;
   }
 
   nav {
-    justify-content: center;
-    align-items: center;
-    align-self: stretch;
     display: flex;
     flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
     padding: 10px;
     gap: 30px;
   }
@@ -120,14 +120,14 @@ export default {
   
   button {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    align-self: stretch;
     justify-content: flex-start;
     height: 35px;
-    border: none;
     border-radius: 5px;
     padding: 5px;
     gap: 10px;
+    border: none;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
   }
@@ -151,8 +151,6 @@ export default {
     transition-duration: 0.5s;
   }
   #indicator-icon:hover, #back-icon:hover {
-    width: 30px;
-    height: 30px;
     background-color: #444444;
   }
 
@@ -168,12 +166,9 @@ export default {
   
   .label {
     color: #fff;
-    /*leading-trim: both;
-    text-edge: cap;*/
     letter-spacing: 0.7px;
-    align-self: center;
+    align-self: stretch;
     white-space: nowrap;
-    margin: auto 0;
     font: 700 14px/20px Overpass, sans-serif;
   }