From fe6ac3fb756c3e6601c356b642dc7352fdd6b7c5 Mon Sep 17 00:00:00 2001
From: mesayusriana12 <mesayusriana12@gmail.com>
Date: Thu, 18 Aug 2022 10:48:56 +0700
Subject: [PATCH] style: transition sidebar and topbar

---
 .../DashboardLayout/Sidebar/Links.vue         | 24 ++++++++++++++++---
 .../DashboardLayout/TopbarDropdown.vue        |  5 +++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/DashboardLayout/Sidebar/Links.vue b/resources/js/Components/DashboardLayout/Sidebar/Links.vue
index 5ebf61d..c570422 100644
--- a/resources/js/Components/DashboardLayout/Sidebar/Links.vue
+++ b/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">
-      <slot />
-    </div>
+    <Transition name="slide-fade" mode="in-out">
+      <div v-if="open" class="flex flex-col" ref="container">
+        <slot />
+      </div>
+    </Transition>
   </div>
 </template>
\ No newline at end of file
diff --git a/resources/js/Components/DashboardLayout/TopbarDropdown.vue b/resources/js/Components/DashboardLayout/TopbarDropdown.vue
index 929a48c..c6d721f 100644
--- a/resources/js/Components/DashboardLayout/TopbarDropdown.vue
+++ b/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>