added side modal

frontend/components/global/SideModal.vue

@@ -9,38 +9,18 @@ defineProps<Props>();
 
 // state
 
-const { $gsap: gsap } = useNuxtApp();
-
 const isSideShow = ref(false);
-const tl = gsap.timeline();
 
-// methods
-
-const enterAnimation = () => {
-    tl.to("#side-overlay", { opacity: 1 }).fromTo(
-        "#side-content",
-        {
-            right: "-100%",
-            opacity: 0,
-        },
-        {
-            right: 0,
-            opacity: 1,
-        },
-        "<"
-    );
-};
-
-const closeAnimation = () => {
-    tl.reverse().then(() => (isSideShow.value = false));
-};
+const isLocked = useScrollLock(window);
 
 // watch
 
 watch(
     () => isSideShow.value,
     (newValue) => {
-        newValue ? enterAnimation() : null;
+        if (newValue) {
+            isLocked.value = true;
+        }
     }
 );
 </script>
@@ -51,38 +31,46 @@ watch(
             <slot name="button" />
         </div>
         <div v-show="isSideShow" class="fixed inset-0">
-            <div
-                id="side-overlay"
-                class="size-full bg-black/20"
-                @click="closeAnimation"
-            ></div>
-            <div
-                id="side-content"
-                class="hidden md:flex w-1/3 lg:w-2/5 bg-white h-full rounded-e-[1.5rem] overflow-hidden absolute top-0 min-md:flex-col"
-            >
+            <Transition name="fade">
                 <div
-                    class="w-full flex justify-between items-center py-[2.5rem] px-[3rem]"
+                    v-if="isSideShow"
+                    id="side-overlay"
+                    class="size-full bg-black/20"
+                    @click="isSideShow = !isSideShow"
+                ></div>
+            </Transition>
+            <Transition name="fade-right">
+                <div
+                    v-if="isSideShow"
+                    id="side-content"
+                    class="hidden md:flex w-1/3 bg-white h-full rounded-e-[1.5rem] overflow-hidden absolute top-0 min-md:flex-col"
                 >
-                    <span class="typo-h-5">
-                        {{ title }}
-                    </span>
-
-                    <button
-                        @click="closeAnimation"
-                        class="size-[3.5rem] flex-center rounded-full border border-transparent hover:border-slate-200 transition-all"
+                    <div
+                        class="w-full flex justify-between items-center py-[2.5rem] px-[3rem]"
                     >
-                        <Icon
-                            name="ci:close"
-                            size="24"
-                            class="**:stroke-black"
-                        />
-                    </button>
-                </div>
+                        <span class="typo-h-5">
+                            {{ title }}
+                        </span>
 
-                <div class="size-full flex flex-col grow bg-red-400">
-                    <slot />
+                        <button
+                            @click="isSideShow = !isSideShow"
+                            class="size-[3.5rem] -me-5 flex-center rounded-full cursor-pointer"
+                        >
+                            <Icon
+                                name="ci:close"
+                                size="24"
+                                class="**:stroke-black"
+                            />
+                        </button>
+                    </div>
+
+                    <div
+                        class="size-full flex flex-col grow overflow-y-auto p-[3rem] pt-0"
+                    >
+                        <slot />
+                    </div>
                 </div>
-            </div>
+            </Transition>
         </div>
     </div>
 </template>