style: transition sidebar and topbar

resources/js/Components/DashboardLayout/Sidebar/Links.vue

@@ -25,6 +25,22 @@ const self = getCurrentInstance()
 const open = ref(active ? true : false)
 </script>
 
+<style scoped>
+  .slide-fade-enter-active {
+    transition: all 0.3s ease-out;
+  }
+
+  .slide-fade-leave-active {
+    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  }
+
+  .slide-fade-enter-from,
+  .slide-fade-leave-to {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+</style>
+
 <template>
   <div class="w-full flex flex-col">
     <button @click.prevent="open = ! open" class="w-full p-4" :class="`${themes().get('sidebar', 'bg-slate-700 text-gray-200')} ${open && 'dark:bg-gray-800'} pl-${padding !== 0 && padding}`">
@@ -35,8 +51,10 @@ const open = ref(active ? true : false)
       </div>
     </button>
 
-    <div v-if="open" class="flex flex-col" ref="container">
+    <Transition name="slide-fade" mode="in-out">
-      <slot />
+      <div v-if="open" class="flex flex-col" ref="container">
-    </div>
+        <slot />
+      </div>
+    </Transition>
   </div>
 </template>

resources/js/Components/DashboardLayout/TopbarDropdown.vue

@@ -23,15 +23,18 @@ const logout = async () => {
 <style scoped>
 .slide-enter-active, .slide-leave-active {
   transition: all 500ms ease-in-out;
+  opacity: 1;
 }
 
 .slide-enter-from, .slide-leave-to {
   right: -100vw;
+  opacity: 0;
 }
 
 @media (min-width: 669px) {
   .slide-enter-from, .slide-leave-to {
-    right: -15rem;
+    right: -12rem;
+    opacity: 0;
   }
 }
 </style>