update aside transition

src/assets/css/style.css

@@ -1321,6 +1321,22 @@ select {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.scale-0 {
+  --tw-scale-x: 0;
+  --tw-scale-y: 0;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-y-0 {
+  --tw-scale-y: 0;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.scale-y-100 {
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -2397,6 +2413,14 @@ select {
   transition-delay: 300ms;
 }
 
+.delay-200 {
+  transition-delay: 200ms;
+}
+
+.delay-150 {
+  transition-delay: 150ms;
+}
+
 .duration-100 {
   transition-duration: 100ms;
 }

src/components/Aside/Aside.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, RouterLink } from 'vue-router'
-import { RouterLink } from 'vue-router'
-import { ref } from 'vue'
 import {
     Dialog,
     DialogPanel,
@@ -14,7 +12,6 @@ import { useMenuStore } from '@/stores/menu'
 import { IconApp } from '@/utils/icons'
 import AsideMenuSingle from '@/components/Aside/AsideMenuSingle.vue'
 import AsideMenuMultiple from '@/components/Aside/AsideMenuMultiple.vue'
-import type { MenuItemModel } from '@/utils/interfaces'
 import { Bars3BottomLeftIcon } from '@heroicons/vue/20/solid'
 
 const menu = useMenuStore()

src/components/Aside/AsideMenuMultiple.vue

@@ -50,11 +50,9 @@ const isMenuSelected = computed(() => {
                 </svg>
             </DisclosureButton>
             <transition enter-active-class="overflow-hidden transition-all duration-300"
-                enter-from-class="transform scale-95 opacity-0 max-h-0"
+                enter-from-class="transform scale-95 max-h-0" enter-to-class="transform scale-100  max-h-[1000px]"
-                enter-to-class="transform scale-300 opacity-300 max-h-[1000px]"
                 leave-active-class="overflow-hidden transition-all duration-300"
-                leave-from-class="transform scale-300 opacity-300 max-h-[1000px]"
+                leave-from-class="transform scale-100  max-h-[1000px]" leave-to-class="transform scale-95 max-h-0">
-                leave-to-class="transform scale-95 opacity-0 max-h-0">
                 <div v-show="item.expanded">
                     <DisclosurePanel :class="['bg-primary-100 rounded-xl ml-4', 'space-y-1']" static>
                         <!-- Nested children -->