feat: add side menu

src/components/overlays/BlurredOverlayContainer.tsx

@@ -0,0 +1,37 @@
+'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>
+
+const BlurredOverlayContainer = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // Trigger fade-in after mount
+    const timeout = setTimeout(() => setLoaded(visible), 300);
+    return () => clearTimeout(timeout);
+  }, [visible]);
+
+  return (
+    <div
+      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`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default BlurredOverlayContainer

src/components/overlays/LoadingOverlay.tsx

@@ -0,0 +1,37 @@
+'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>
+
+const LoadingOverlay = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // Trigger fade-in after mount
+    const timeout = setTimeout(() => setLoaded(visible), 300);
+    return () => clearTimeout(timeout);
+  }, [visible]);
+
+  return (
+    <div
+      data-visible={visible}
+      data-loaded={loaded}
+      className={`absolute inset-0 flex items-center justify-center
+                 backdrop-blur-sm bg-background/${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`}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default LoadingOverlay

src/components/overlays/animations/PingAnimation.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+type Props = object
+
+function PingAnimation({ }: Props) {
+    return (
+        <div className="relative w-16 h-16">
+            <div className="absolute inset-0 rounded-full border-4 border-foreground/30 animate-ping" />
+            <div className="absolute inset-0 flex items-center justify-center">
+                <div className="w-8 h-8 border-4 border-foreground border-t-transparent rounded-full animate-spin" />
+            </div>
+        </div>
+    )
+}
+
+export default PingAnimation