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] 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