add actionbar

app.vue

@@ -1,16 +1,13 @@
-<!--<template>
-  <div>
-    <NuxtWelcome />
-  </div>
-</template>-->
-
 <template>
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
 </template>
 
+
 <script>
+
+
   //import Page from "./layouts/Page"
 
   /*definePageMeta({

layouts/Actionbar.vue

@@ -1,5 +1,166 @@
 <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>
+
+
+<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>

layouts/Navigationbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="sidebar">
+    <aside class="navbar">
       <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>
 
 
@@ -65,51 +65,53 @@ export default {
   
   
   
-<style>
+<style scoped>
 
-  * {
+* {
-    box-sizing: border-box;
+  box-sizing: border-box;
-  }
+}
 
-  .sidebar {
+  .navbar {
-    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;
+    height: fit-content;
+    min-width: 200px;
     border-radius: 10px;
     gap: 10px;
-    padding: 10px;
+    padding: 15px;
+    margin: 0;
+    box-shadow: 4px 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;
   }
   
 
 
   .menus {
-    align-items: flex-start;
-    align-self: stretch;
     display: flex;
     flex-direction: column;
-    padding: 40px 0;
+    align-items: stretch;
+    justify-content: center;
+    padding: 20px 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 +122,14 @@ export default {
   
   button {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    align-self: stretch;
     justify-content: flex-start;
+    align-self: stretch;
     height: 35px;
-    border: none;
     border-radius: 5px;
-    padding: 5px;
+    gap: 5px;
-    gap: 10px;
+    border: none;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
   }
@@ -138,21 +140,20 @@ export default {
 
   .icon {
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    width: 25px;
+    width: 35px;
-    height: 25px;
+    height: 35px;
   }
   #indicator-icon, #back-icon {
-    width: 30px;
+    width: 40px;
-    height: 30px;
+    height: 40px;
     border-radius: 5px;
     background-color: #2c2c2c;
     transition-duration: 0.5s;
   }
   #indicator-icon:hover, #back-icon:hover {
-    width: 30px;
-    height: 30px;
     background-color: #444444;
   }
 
@@ -168,13 +169,11 @@ export default {
   
   .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;
+    font: 600 14px/20px Overpass, sans-serif;
   }
 
 </style>

layouts/PageHeader.vue

@@ -22,7 +22,7 @@ export default {
 </script>
 
 
-<style>
+<style scoped>
 
     * {
         box-sizing: border-box;
@@ -33,7 +33,6 @@ export default {
         justify-content: space-between;
         align-items: center;
         align-self: stretch;
-        border-bottom: 1px solid #000;
         background-color: #2c2c2c;
         height: 60px;
         padding: 10px 20px;

layouts/default.vue

@@ -1,30 +1,31 @@
 <template>
-  <body>
+  <PageHeader />
-    <PageHeader />
+  <main>
-    <main>
+    <Navigationbar />
-      <Navigationbar />
+    <section id="content">
-      <section id="content">
+      <section id="content-header">
-        <section id="content-header">
+        <pre id="page-name">Pagename</pre>
-          <pre id="page-name">Pagename</pre>
-        </section>
-        <section id="content-body">
-          <!--<slot />-->
-        </section>
       </section>
-    </main>
+      <section id="content-body">
-  </body>
+        <!--<slot />-->
+      </section>
+    </section>
+    <Actionbar />
+  </main>
 </template>
 
 
 <script>
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
+import Actionbar from "./Actionbar.vue";
 
 export default {
     name: "Page",
     components: {
       PageHeader, 
       Navigationbar,
+      Actionbar,
     }
 }
 
@@ -41,8 +42,8 @@ export default {
   body {
     display: flex;
     flex-direction: column;
-    justify-content: stretch;
+    align-items: stretch;
-    align-content: stretch;
+    justify-content: flex-start;
     background-color: #212121;
   }
   
@@ -51,7 +52,7 @@ export default {
     flex-direction: row;
     width: 100%;
     gap: 10px;
-    padding: 10px;
+    padding: 10px 25px 10px 10px;
   }
   
   #content {

pages/index.vue

@@ -1,13 +1,7 @@
 <template>
-    <head>
+    <NuxtLayout>
-        <title></title>
+      <NuxtPage />
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    </NuxtLayout>
-    </head>
-    <body>
-        <NuxtLayout>
-            <NuxtPage />
-        </NuxtLayout>
-    </body>
 </template>
 
 <script lang="ts">