From 8921664270be0fe12fb2e5bdd113a572bf1264ff Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Wed, 8 Nov 2023 10:58:22 +0100
Subject: [PATCH 1/2] add lieghtMode

---
 layouts/Navigationbar.vue | 369 +++++++++++++++++++++++---------------
 1 file changed, 223 insertions(+), 146 deletions(-)

diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 559b12d..1f6fe76 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,56 +1,63 @@
 <template>
-    <aside class="navbar">
-      <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="{ 'navbar-dark': darkMode, 'navbar-light': !darkMode }">
+    <div class="toggle">
+      <div :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">
+        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+          src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
-    </aside>
+    </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 :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 :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 :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 :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 :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 :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
+        </button>
+      </nav>
+    </div>
+  </aside>
 </template>
 
 
@@ -58,7 +65,24 @@
 <script>
 
 export default {
-    name: "Navigationbar",
+  name: "Navigationbar",
+  data() {
+    return {
+      darkMode: false,
+      darkStylesImg: {
+        filter: 'invert(100%)',
+      },
+      lightStylesImg: {
+        filter: 'none',
+      },
+      darkStylesLabel: {
+        color: '#fff',
+      },
+      lightStylesLabel: {
+        color: '#000',
+      },
+    };
+  },
 }
 
 </script>
@@ -66,114 +90,167 @@ export default {
   
   
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
 
-  .navbar {
-    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: 15px;
-    margin: 0;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
-  }
+.navbar-dark {
+  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: 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;
+  align-items: stretch;
+  justify-content: center;
+  width: 200px;
+  height: fit-content;
+  min-width: 200px;
+  border-radius: 10px;
+  gap: 10px;
+  padding: 15px;
+  margin: 0;
+  box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+  background-color: #FFFFFF;
+}
 
 
-  .toggle {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    height: 40px;
-  }
-  
+.toggle {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
 
 
-  .menus {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    padding: 20px 0;
-    gap: 30px;
-  }
 
-  nav {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-    padding: 10px;
-    gap: 30px;
-  }
-  #home-menu {
-    border-bottom: 1px solid #8e8e8e;
-  }
+.menus {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 20px 0;
+  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;
-  }
-  button:hover {
-    background-color: #444444;
-  }
+nav {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  padding: 10px;
+  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;
+}
 
-  .icon {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    width: 35px;
-    height: 35px;
-  }
-  #indicator-icon, #back-icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 5px;
-    background-color: #2c2c2c;
-    transition-duration: 0.5s;
-  }
-  #indicator-icon:hover, #back-icon:hover {
-    background-color: #444444;
-  }
+.dark-menu {
+  background-color: #2c2c2c;
+}
 
-  .icon > img {
-    width: 20px;
-    height: 20px;
-    filter: invert(100%);
-    object-fit: contain;
-    object-position: center;
-    overflow: hidden;
-  }
+.light-menu {
+  background-color: #FFFFFF;
+}
 
-  
-  .label {
-    color: #fff;
-    letter-spacing: 0.7px;
-    align-self: center;
-    white-space: nowrap;
-    margin: auto 0;
-    font: 600 14px/20px Overpass, sans-serif;
-  }
+.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;
+}
+
+.lightStylesIcon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+}
+
+.darkStylesIcon {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 35px;
+  height: 35px;
+}
+
+#back-icon,
+#indicator-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  transition-duration: 0.5s;
+}
+
+.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;
+}
+
+.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;
+}
 </style>
\ No newline at end of file
-- 
2.43.0


From ff1766dc35a509ac33130b4b9e0cf992de121498 Mon Sep 17 00:00:00 2001
From: "selina.mail" <selina.mail@tueit.de>
Date: Wed, 8 Nov 2023 13:54:00 +0100
Subject: [PATCH 2/2] add toggle behaviour

---
 layouts/Navigationbar.vue | 83 +++++++++++++++++++++++++++++----------
 1 file changed, 63 insertions(+), 20 deletions(-)

diff --git a/layouts/Navigationbar.vue b/layouts/Navigationbar.vue
index 1f6fe76..397b442 100644
--- a/layouts/Navigationbar.vue
+++ b/layouts/Navigationbar.vue
@@ -1,11 +1,12 @@
 <template>
-  <aside :class="{ 'navbar-dark': darkMode, 'navbar-light': !darkMode }">
+  <aside :class="[darkMode ? 'navbar-dark' : 'navbar-light', isExpanded ? 'is-expanded' : 'is-not-expanded']" >
     <div class="toggle">
-      <div :class="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="back-icon">
+      <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="{ 'darkStylesIcon': darkMode, 'lightStylesIcon': !darkMode }" id="indicator-icon">
-        <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
+      <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>
     </div>
@@ -16,7 +17,7 @@
             <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
               src="../icons/navbar-icons/Home-Icon.svg" />
           </div>
-          <pre :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Home</pre>
         </button>
       </nav>
       <nav id="site-menu">
@@ -25,35 +26,35 @@
             <img :style="darkMode ? darkStylesImg : lightStylesImg" loading="lazy"
               src="../icons/navbar-icons/Checklists-Icon.svg" />
           </div>
-          <pre :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Checklists</pre>
+          <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 :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Config Items</pre>
+          <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 :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Solutions</pre>
+          <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 :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Accounting</pre>
+          <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 :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
+          <pre v-if="isExpanded" :style="darkMode ? darkStylesLabel : lightStylesLabel" class="label">Clients</pre>
         </button>
       </nav>
     </div>
@@ -69,6 +70,7 @@ export default {
   data() {
     return {
       darkMode: false,
+      isExpanded: true,
       darkStylesImg: {
         filter: 'invert(100%)',
       },
@@ -83,6 +85,11 @@ export default {
       },
     };
   },
+  methods: {
+    toggleSidebar() {
+      this.isExpanded = !this.isExpanded;
+    }
+  }
 }
 
 </script>
@@ -94,14 +101,38 @@ export default {
   box-sizing: border-box;
 }
 
+aside {
+  transition: 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+  width: calc(2.5rem + 2.5rem);
+  overflow: hidden;
+}
+
+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);
+}
+
+
 .navbar-dark {
   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: 15px;
@@ -113,11 +144,8 @@ export default {
 .navbar-light {
   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: 15px;
@@ -140,8 +168,9 @@ export default {
 .menus {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-  justify-content: center;
+  position: relative;
+  transition: 0.2s ease-out;
+  justify-content: flex;
   padding: 20px 0;
   gap: 30px;
 }
@@ -149,9 +178,9 @@ export default {
 nav {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
   justify-content: center;
-  padding: 10px;
+  padding-top: 0.8rem;
+  padding-bottom: 0.8rem;
   gap: 30px;
 }
 
@@ -192,6 +221,7 @@ button {
   justify-content: center;
   width: 35px;
   height: 35px;
+  transition: 0.2s ease-out;
 }
 
 .lightStylesIcon {
@@ -201,6 +231,7 @@ button {
   justify-content: center;
   width: 35px;
   height: 35px;
+  transition: 0.2s ease-out;
 }
 
 .darkStylesIcon {
@@ -210,14 +241,23 @@ button {
   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;
 }
 
-#back-icon,
 #indicator-icon {
   width: 40px;
   height: 40px;
   border-radius: 5px;
   transition-duration: 0.5s;
+  transition: transform 0.3s;
 }
 
 .lightStylesIcon:hover {
@@ -236,6 +276,7 @@ button {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
+  transition: 0.2s ease-out;
 }
 
 .dark-home-menu {
@@ -252,5 +293,7 @@ button {
   white-space: nowrap;
   margin: auto 0;
   font: 600 14px/20px Overpass, sans-serif;
+  opacity: 0;
+  transition: opacity 0.5s ease-out; 
 }
 </style>
\ No newline at end of file
-- 
2.43.0