improve: side menu animation

src/components/menu/SideMenu.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useMemo } from 'react'
+import React, { useMemo, useRef } from 'react'
+import { motion, PanInfo, Variants } from 'framer-motion';
 import MenuItemType from './SideMenuItem'
 import SideMenuItem from './SideMenuItem';
 import NotificationBellIcon from '../icons/NotificationBellIcon';
@@ -73,11 +74,43 @@ type Props = {
 
 function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
     const menuStateMemo = useMemo(() => menuState, [menuState]);
+    const closeRef: React.Ref<HTMLDivElement> | undefined = useRef(null);
+
+    const variants: Variants = {
+        hidden: {
+            x: '100%',
+        },
+        visible: {
+            x: 0,
+            transition: {
+                duration: 0.1,
+                ease: 'easeInOut',
+            },
+        },
+    };
+
+    const onDrag = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+        if (info.offset.x > 100) {
+            if (closeRef.current) {
+                closeRef.current.click();
+            }
+        }
+    }
 
     return (
-        <div className='w-full'>
+        <div className='w-full' ref={closeRef} onClick={toggleMenuState} >
-            <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} onClick={toggleMenuState} outDelay={150}>
+            <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} outDelay={150}>
-                <div
+                <motion.div
+                    drag='x'
+                    dragConstraints={{ left: 0, right: 0 }}
+                    transition={{ type: "spring", stiffness: 200, damping: 20 }}
+                    dragTransition={{ bounceDamping: 10, bounceStiffness: 600 }}
+                    dragElastic={0.05}
+                    onDragEnd={onDrag}
+                    initial="hidden"
+                    animate={menuState ? 'visible' : 'hidden'}
+                    variants={variants}
+                    data-visible={menuState}
                     data-isvisible={menuStateMemo}
                     onClick={(e) => { e.stopPropagation(); }}
                     className={`fixed top-0 bottom-0 -right-full data-[isvisible=true]:right-0 transition-all duration-100 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}>
@@ -99,7 +132,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                             <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
                         </li>
                     </ul>
-                </div>
+                </motion.div>
             </BlurredOverlayContainer>
         </div>
     )