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