"use client"; import { useState, useRef, useEffect } from "react"; import { motion } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import useMeasure from "react-use-measure"; import { UserIcon, CreditCardIcon, FolderIcon, File01Icon, SettingsIcon, HelpCircleIcon, LogoutIcon, MoreHorizontalCircle01Icon, } from "@hugeicons/core-free-icons"; // Change Here const menuItems = [ { id: "profile", label: "پروفایل", icon: UserIcon }, { id: "upgrade", label: "ارتقا حساب", icon: CreditCardIcon }, { id: "projects", label: "پروژه‌ها", icon: FolderIcon }, { id: "documentation", label: "مستندات", icon: File01Icon }, { id: "divider", label: "", icon: null }, { id: "settings", label: "تنظیمات", icon: SettingsIcon }, { id: "help", label: "راهنما", icon: HelpCircleIcon }, { id: "logout", label: "خروج", icon: LogoutIcon }, ]; const easeOutQuint: [number, number, number, number] = [0.23, 1, 0.32, 1]; /** Open menu width — room for Persian labels without wrapping. */ const OPEN_WIDTH = 248; export default function SmoothDropdown() { const [isOpen, setIsOpen] = useState(false); const [activeItem, setActiveItem] = useState("profile"); const [hoveredItem, setHoveredItem] = useState(null); const containerRef = useRef(null); // Lock the tallest measured height while open so shared-element hover // (especially across the divider) cannot shrink the shell and spring it up. // Adjust peak during render (React-supported) — not in an effect / ref. const [contentRef, contentBounds] = useMeasure({ offsetSize: true }); const measuredHeight = Math.max(40, Math.ceil(contentBounds.height)); const [peakHeight, setPeakHeight] = useState(40); const [wasOpen, setWasOpen] = useState(false); if (isOpen !== wasOpen) { setWasOpen(isOpen); if (!isOpen) setPeakHeight(40); } else if (isOpen && measuredHeight > peakHeight) { setPeakHeight(measuredHeight); } useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( containerRef.current && !containerRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; if (isOpen) { document.addEventListener("mousedown", handleClickOutside); } return () => document.removeEventListener("mousedown", handleClickOutside); }, [isOpen]); const openHeight = isOpen ? Math.max(measuredHeight, peakHeight) : 40; return (

!isOpen && setIsOpen(true)} onKeyDown={(event) => { if (isOpen) return; if (event.key === "Enter" || event.key === " ") { event.preventDefault(); setIsOpen(true); } }} > {/* Menu Content - visible when open */}

); }