Vue 3 better animation (#257)

* vue-3-better-animation

* Working on migration to vueuse/motion

* Form sidebar animations

* Clean code

* Added animations for modal

* Finished implementing better animations

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>

resources/js/components/open/editors/EditorRightSidebar.vue

@@ -0,0 +1,28 @@
+<template>
+  <transition @leave="(el,done) => motions.slide.leave(done)">
+    <div v-if="show" v-motion-slide-right="'slide'"
+         class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-50"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useMotions } from '@vueuse/motion'
+
+export default {
+  name: 'EditorRightSidebar',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
+    return {
+      motions: useMotions()
+    }
+  }
+}
+</script>