add: side menu transition

src/components/overlays/BlurredOverlayContainer.tsx

@@ -1,37 +1,53 @@
 'use client'
 
 import React, { useEffect, useState } from 'react'
-import PingAnimation from './animations/PingAnimation';
 
 type Props = {
-  visible?: boolean;
-  bgOpacity?: number;
-  delay?: number;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+  visible?: boolean
+  bgOpacity?: string
+  changeDelay?: string
+  effectdelay?: string
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
-const BlurredOverlayContainer = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
-  const [loaded, setLoaded] = useState(false);
+const BlurredOverlayContainer = ({
+  visible = true,
+  bgOpacity = '30',
+  changeDelay = '0',
+  effectdelay = '0',
+  children,
+  ...props
+}: Props) => {
+  const [loaded, setLoaded] = useState(visible)
 
   useEffect(() => {
-    // Trigger fade-in after mount
-    const timeout = setTimeout(() => setLoaded(visible), 300);
-    return () => clearTimeout(timeout);
-  }, [visible]);
+    if (visible) {
+      // Show immediately or after delay
+      const timeout = setTimeout(() => setLoaded(true), +changeDelay)
+      return () => clearTimeout(timeout)
+    } else {
+      // Hide with delay (matches opacity transition duration)
+      const timeout = setTimeout(() => setLoaded(false), +changeDelay) // 300ms matches Tailwind transition
+      return () => clearTimeout(timeout)
+    }
+  }, [visible, changeDelay])
+
+  const zClass =
+    visible || loaded ? 'z-50' : !visible && !loaded ? '-z-50' : 'z-0'
 
   return (
-    <div
+    <button
       data-visible={visible}
       data-loaded={loaded}
       className={`absolute inset-0 flex items-center justify-center
-                 backdrop-blur-sm bg-black/${bgOpacity}
-                 opacity-0 transition-opacity duration-300 ease-in-out delay-${delay}
-                 data-[loaded=false]:-z-50
-                 data-[visible=true]:z-50
-                 data-[visible=true]:opacity-100`}
+        backdrop-blur-sm bg-black/${bgOpacity}
+        opacity-0 transition-opacity duration-300 ease-in-out delay-${effectdelay}
+        ${zClass}
+        ${visible ? 'opacity-100' : 'opacity-0'}`}
+      {...props}
     >
       {children}
-    </div>
+    </button>
   )
 }
 
-export default BlurredOverlayContainer
+export default BlurredOverlayContainer