add: profile dropdown

2025-08-10 16:30:37 +03:30
parent 29363c1a15
commit ac30ac1ecf
4 changed files with 154 additions and 24 deletions
@@ -0,0 +1,62 @@
+'use client';
+
+import clsx from 'clsx'
+import { HTMLMotionProps, motion } from 'framer-motion';
+import { CloseCircle } from 'iconsax-react'
+import React, { useEffect, useRef } from 'react'
+
+interface DropdownProps extends Omit<HTMLMotionProps<"div">, "ref"> {
+    active?: boolean,
+    toggle?: React.MouseEventHandler<HTMLButtonElement> | undefined,
+    children?: React.ReactNode
+};
+
+function Dropdown({ active, toggle, children, ...rest }: DropdownProps) {
+    const boxRef = useRef<HTMLDivElement>(null);
+    const closeButtonRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {
+                closeButtonRef.current?.click();
+            }
+        };
+
+        if (active) {
+            document.addEventListener('click', handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [active]);
+
+
+    return (
+        <motion.div
+            ref={boxRef}
+            initial={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
+            animate={{ y: active ? 0 : '-10%', scale: active ? 1 : 0.95, opacity: active ? 1 : 0 }}
+            transition={{ duration: 0.1 }}
+            className={clsx(
+                'box-shadow-normal',
+                'fixed inset-0 bg-container rounded-normal z-50',
+                'xl:absolute xl:top-18 xl:left-3 xl:right-auto xl:h-screen xl:w-[300px]',
+                active === false && 'pointer-events-none'
+            )}
+            {...rest}
+        >
+            <div className='relative w-full h-full'>
+                <button 
+                    ref={closeButtonRef}
+                    className='xl:hidden' 
+                    onClick={toggle} >
+                    <CloseCircle size={20} className='cursor-pointer stroke-foreground absolute left-6 top-6' />
+                </button>
+                {children}
+            </div>
+        </motion.div>
+    )
+}
+
+export default Dropdown