add toggle behaviour

revert 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>
-      <NuxtPage />
-    </NuxtLayout>
-  </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>

layouts/Navigationbar.vue

@@ -1,56 +1,64 @@
 <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>
+  <aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
+    <div class="toggle">
+      <div v-if="isExpanded" :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
+        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy" src="../icons/Back-Icon.svg" />
       </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 :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon" @click="toggleSidebar">
+        <img :style="[darkMode ? darkStylesImg : lightStylesImg ]" 
+          loading="lazy" 
+          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
-    </section>
+    </div>
+    <div class="menus">
+      <nav :class="{ 'dark-home-menu': darkMode, 'light-home-menu': !darkMode }" id="home-menu">
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="home-button">
+          <div class="icon" id="home-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Home-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
+        </button>
+      </nav>
+      <nav id="site-menu">
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="checklists-button">
+          <div class="icon" id="checklists-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Checklists-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
+        </button>
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="assets-button">
+          <div class="icon" id="assets-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Assets-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
+        </button>
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="solutions-button">
+          <div class="icon" id="solutions-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Solutions-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
+        </button>
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="accounting-button">
+          <div class="icon" id="accounting-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Accounting-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
+        </button>
+        <button :class="{ 'dark-menu': darkMode, 'light-menu': !darkMode }" id="clients-button">
+          <div class="icon" id="clients-icon">
+            <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+              src="../icons/navbar-icons/Clients-Icon.svg" />
+          </div>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
+        </button>
+      </nav>
+    </div>
+  </aside>
 </template>
 
 
@@ -58,123 +66,234 @@
 <script>
 
 export default {
-    name: "Navigationbar",
+  name: "Navigationbar",
+  data() {
+    return {
+      darkMode: false,
+      isExpanded: true,
+      darkStylesImg: {
+        filter: 'invert(100%)',
+      },
+      lightStylesImg: {
+        filter: 'none',
+      },
+      darkStylesLabel: {
+        color: '#fff',
+      },
+      lightStylesLabel: {
+        color: '#000',
+      },
+    };
+  },
+  methods: {
+    toggleSidebar() {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
 }
 
 </script>
   
   
   
-<style>
+<style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
+aside {
+  transition: 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+  width: calc(2.5rem + 2.5rem);
+  overflow: hidden;
+}
 
-  .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;
-  }
+aside.is-expanded {
+  width: 238px;
+}
+
+.is-expanded .label {
+  opacity: 1;
+  transition: 0.3s ease-out;
+}
+
+.is-not-expanded .darkStylesIcon {
+  transform: rotate(180deg);
+}
+
+.is-not-expanded .lightStylesIcon {
+  transform: rotate(180deg);
+}
 
 
-  .toggle {
-    justify-content: space-between;
-    align-items: center;
-    align-self: stretch;
-    display: flex;
-    height: 40px;
-    padding: 10px;
-  }
-  
+.navbar-dark {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  height: fit-content;
+  border-radius: 10px;
+  gap: 10px;
+  padding: 15px;
+  margin: 0;
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  background-color: #2c2c2c;
+}
+
+.navbar-light {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: fit-content;
+  border-radius: 10px;
+  gap: 10px;
+  padding: 15px;
+  margin: 0;
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+}
 
 
-  .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;
-  }
+.toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
 
 
-  .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;
-  }
+.menus {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: 0.2s ease-out;
+  justify-content: flex;
+  padding: 20px 0;
+  gap: 30px;
+}
 
-  
-  .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;
-  }
+nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
+  gap: 30px;
+}
 
+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;
+}
+
+.dark-menu {
+  background-color: #2c2c2c;
+}
+
+.light-menu {
+  background-color: #FFFFFF;
+}
+
+.dark-menu:hover {
+  background-color: #444444;
+}
+
+.light-menu:hover {
+  background-color: #ACACAC;
+}
+
+.icon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  transition: 0.2s ease-out;
+}
+
+.lightStylesIcon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  transition: 0.2s ease-out;
+}
+
+.darkStylesIcon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+  transition: 0.2s ease-out;
+}
+
+#back-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  transition-duration: 0.5s;
+  transition: 0.2s ease-out;
+}
+
+#indicator-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  transition-duration: 0.5s;
+  transition: transform 0.3s;
+}
+
+.lightStylesIcon:hover {
+  background-color: #ACACAC;
+}
+
+.darkStylesIcon:hover {
+  background-color: #444444;
+}
+
+.icon>img,
+.lightStylesIcon>img,
+.darkStylesIcon>img {
+  width: 20px;
+  height: 20px;
+  object-fit: contain;
+  object-position: center;
+  overflow: hidden;
+  transition: 0.2s ease-out;
+}
+
+.dark-home-menu {
+  border-bottom: 1px solid #8e8e8e;
+}
+
+.light-home-menu {
+  border-bottom: 1px solid #BABABA;
+}
+
+.label {
+  letter-spacing: 0.7px;
+  align-self: center;
+  white-space: nowrap;
+  margin: auto 0;
+  font: 600 14px/20px Overpass, sans-serif;
+  opacity: 0;
+  transition: opacity 0.5s ease-out; 
+}
 </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 />
-    <main>
-      <Navigationbar />
-      <section id="content">
-        <section id="content-header">
-          <pre id="page-name">Pagename</pre>
-        </section>
-        <section id="content-body">
-          <!--<slot />-->
-        </section>
+  <PageHeader />
+  <main>
+    <Navigationbar />
+    <section id="content">
+      <section id="content-header">
+        <pre id="page-name">Pagename</pre>
       </section>
-    </main>
-  </body>
+      <section id="content-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-content: stretch;
+    align-items: 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>
-        <title></title>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    </head>
-    <body>
-        <NuxtLayout>
-            <NuxtPage />
-        </NuxtLayout>
-    </body>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
 </template>
 
 <script lang="ts">