solved transition problem of actionbar

layouts/Actionbar.vue

@@ -1,73 +1,104 @@
 <template>
-  <aside class="actionbar">
+  <aside :class="[ 'actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div class="icon" id="indicator-icon">
+    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode' ]" id="indicator-icon" @click="toggleActionbar">
-      <img loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
+      <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Indicator-Icon-Opened.svg"/>
     </div>
-    <nav class="actions">
+    <nav class="actions" >
-      <button id="search">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="search" >
         <div class="icon" id="search-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Search-Icon.svg"/>
         </div>
-        <pre class="label">Search</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Search</pre>
+        </Transition>
       </button>
-      <button id="filter">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="filter" >
         <div class="icon" id="filter-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Filter-Icon.svg"/>
         </div>
-        <pre class="label">Filter</pre>
+        <Transition name="fade">
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Filter</pre>
+        </Transition>
       </button>
-      <button id="instances">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="instances" >
         <div class="icon" id="instances-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Instances-Icon.svg"/>
         </div>
-        <pre class="label">Instances</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Instances</pre>
+        </Transition>
       </button>
-      <button id="attachments">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="attachments" >
         <div class="icon" id="attachments-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Attachments-Icon.svg"/>
         </div>
-        <pre class="label">Attachments</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Attachments</pre>
+        </Transition>
       </button>
-      <button id="sell">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="sell" >
         <div class="icon" id="sell-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Sell-Icon.svg"/>
         </div>
-        <pre class="label">Sell</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Sell</pre>
+        </Transition>
       </button>
-      <button id="archive">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="archive" >
         <div class="icon" id="archive-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Archive-Icon.svg"/>
         </div>
-        <pre class="label">Archive</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Archive</pre>
+        </Transition>
       </button>
-      <button id="new">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="new" >
         <div class="icon" id="new-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Add-New-Icon.svg"/>
         </div>
-        <pre class="label">New</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">New</pre>
+        </Transition>
       </button>
-      <button id="edit">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="edit" >
         <div class="icon" id="edit-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Edit-Icon.svg"/>
         </div>
-        <pre class="label">Edit</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Edit</pre>
+        </Transition>
       </button>
-      <button id="delete">
+      <button :class="[ darkMode ? 'button-darkmode' : 'button-lightmode' ]" id="delete" >
         <div class="icon" id="delete-icon">
-          <img loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
+          <img :class="[ darkMode ? 'img-darkmode' : 'img-lightmode' ]" loading="lazy" src="../icons/actionbar-icons/Delete-Icon.svg"/>
         </div>
-        <pre class="label">Delete</pre>
+        <Transition name="fade" >
+          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode' ]">Delete</pre>
+        </Transition>
       </button>
     </nav>
   </aside>
 </template>
 
 
+
 <script>
 
-export default {
+  export default {
     name: "Actionbar",
-}
+    data() {
+      return {
+        darkMode: true,
+        isExpanded: true,
+      };
+    },                                            
+    methods: {
+      toggleActionbar() {
+        console.log('Actionbar toggled');
+        this.isExpanded = !this.isExpanded;
+      },
+    },
+  }
 
 </script>
 
@@ -80,73 +111,110 @@ export default {
   }
 
 
-  .actionbar {
+  aside.actionbar {
     display: flex;
     flex-direction: column;
     position: sticky;
     top: 5rem;
-    align-items: flex-start;
-    justify-content: center;
-    width: fit-content;
     height: fit-content;
+    width: fit-content;
+    inline-size: fit-content;
     border-radius: 0.625rem;
+    flex: 0 0 0;
+    align-items: stretch;
+    justify-content: center;
     padding: 1.875rem 0.625rem;
     gap: 1.25rem;
+    transition: all 10s ease-in-out 0s;
+    overflow: clip;
+  }
+  .actionbar-darkmode {
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
+    background-color: #2C2C2C;
+  }
+  .actionbar-lightmode {
+    box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+    background-color: #FFFFFF;
+  }
+  aside.is-expanded {
+    animation: expand 0.5s linear both;
+  }
+  aside.is-not-expanded {
+    animation: contract 0.5s linear both;
+    width: stretch;
+    inline-size: stretch;
   }
 
 
   .actions {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    align-items: flex-start;
     justify-content: center;
-    align-self: stretch;
     padding: 1.25rem 0;
     gap: 1.25rem;
+    overflow: clip;
   }
 
 
   button {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-self: stretch;
-    justify-content: flex-start;
     height: 1.875rem;
     border-radius: 0.625rem;
+    align-items: center;
+    justify-content: flex-start;
     border: none;
-    background-color: #2c2c2c;
+    transition: 0.2s ease-in-out;
-    transition-duration: 0.5s;
+    overflow: clip;
+    gap: 0.125rem
   }
-  button:hover {
+  .button-darkmode {
+    background-color: #2C2C2C;
+  }
+  .button-lightmode {
+    background-color: #FFFFFF;
+  }
+  .button-darkmode:hover, .indicator-darkmode:hover {
     background-color: #444444;
   }
+  .button-lightmode:hover, .indicator-lightmode:hover {
+    background-color: #ACACAC;
+  }
+  .is-not-expanded > button {
+    align-self: center;
+    gap: 0.5rem;
+  }
 
 
   .icon {
     display: flex;
     flex-direction: row;
+    /*width: 0.875rem;*/
+    height: 1.875rem;
     align-items: center;
     justify-content: center;
-    width: 1.875rem;
+    padding: 0 0.5rem;
-    height: 1.875rem;
+    transition: padding 0.5s linear
   }
   #indicator-icon {
     width: 1.875rem;
     height: 1.875rem;
     border-radius: 0.3125rem;
-    background-color: #2c2c2c;
+    transition: 0.2s ease-in-out;
-    transition-duration: 0.5s;
   }
-  #indicator-icon:hover {
+  .is-not-expanded .icon {
-    background-color: #444444;
+    align-self: center;
+    padding: 0 0.375rem;
+  }
+  .is-not-expanded #indicator-icon {
+    transform: rotate(180deg);
   }
 
-  .icon > img {
+  img {
     width: 0.875rem;
     height: 0.875rem;
-    filter: invert(100%);
     object-fit: contain;
     object-position: center;
     overflow: hidden;
@@ -154,15 +222,90 @@ export default {
   #indicator-icon > img {
     height: 1.25rem;
   }
+  .img-darkmode {
+    filter: invert(100%);
+  }
 
 
   .label {
-    color: #fff;
+    display: inline-flex;
+    min-width: 0;
+    padding: 0rem 0.3125rem 0rem 0rem;
     letter-spacing: 5%;
     align-self: center;
     white-space: nowrap;
     font: 400 0.875rem/1.25rem Overpass, sans-serif;
   }
+  .label-darkmode {
+    color: #FFFFFF;
+  }
+  .label-lightmode {
+    color: #000000;
+  }
+
+
+  .fade-enter-from, .fade-leave-to {
+    opacity: 0;
+  }
+  .fade-enter-to, .fade-leave-from {
+    opacity: 1;
+    max-width: 0;
+  }
+  .fade-enter-active {
+    transition: all 0.75s;
+    overflow: clip;
+    animation: fade-in 0.5s linear forwards;
+  }
+  .fade-leave-active {
+    transition: all 0.75s;
+    animation: fade-out 0.5s linear forwards;
+  }
+  .fade-move {
+    transition: transform 5s
+  }
+
+  @keyframes expand {
+    from {
+      max-inline-size: 3.25rem;
+      max-width: 3.25rem;
+    }
+    to {
+      max-inline-size: 9.0625rem;
+      max-width: 9.0625rem;
+    }
+  }
+  @keyframes contract {
+    from {
+      max-inline-size: 9.0625rem;
+      max-width: 9.0625rem;
+    }
+    to {
+      max-inline-size: 3.25rem;
+      max-width: 3.25rem;
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      max-width: 0;
+      max-inline-size: 0;
+    }
+    to {
+      max-width: 7.5rem;
+      width: fit-content;
+    }
+  }
+  @keyframes fade-out {
+    from {
+      max-width: 7.5rem;
+      width: fit-content;
+    }
+    to {
+      max-width: 0;
+      max-inline-size: 0;
+    }
+  }
+
 
 
 </style>