From 980b4d26bbf9e5922143c9d04bf296b8332567fd Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sun, 17 Jul 2022 11:14:32 +0700
Subject: [PATCH] adding sidebar menu transition

---
 .../js/Components/DashboardLayout/Sidebar.vue     | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/resources/js/Components/DashboardLayout/Sidebar.vue b/resources/js/Components/DashboardLayout/Sidebar.vue
index bcaf398..5ff0ea5 100644
--- a/resources/js/Components/DashboardLayout/Sidebar.vue
+++ b/resources/js/Components/DashboardLayout/Sidebar.vue
@@ -21,9 +21,22 @@ const fetch = async () => {
 fetch()
 </script>
 
+<style scoped>
+.op-enter-active, .op-leave-active {
+  transition: all 50ms ease-in-out;
+  opacity: 1;
+}
+
+.op-enter-from, .op-leave-to {
+  opacity: 0;
+}
+</style>
+
 <template>
   <div class="flex flex-col w-full h-full bg-inherit">
-    <Builder v-if="menus.length" :menus="menus" />
+    <transition name="op" mode="in-out">
+      <Builder v-if="menus.length" :menus="menus" />
+    </transition>
   </div>
 
   <div class="hidden pl-8"></div>