From c24b361f2cc5c1972f7d9aff4e4f38526a059b51 Mon Sep 17 00:00:00 2001 From: Bhuvan_M_Acharya Date: Sun, 12 Oct 2025 11:08:23 +0530 Subject: [PATCH] fix: close dropdown on outside click in MainHeader --- src/components/Header/MainHeader.jsx | 32 +++++++++++++++++++++------- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/components/Header/MainHeader.jsx b/src/components/Header/MainHeader.jsx index c5873c14..5ba01ca0 100644 --- a/src/components/Header/MainHeader.jsx +++ b/src/components/Header/MainHeader.jsx @@ -17,6 +17,21 @@ export default function Header() { const [shopOpen, setShopOpen] = useState(false); const [search, setSearch] = useState(false); const mobileMenuRef = useRef(null); + const ShopOpenRef=useRef(null); + + //Close Shop menu when clicked outside + useEffect(() => { + const handleClickOutside = (e) => { + if (ShopOpenRef.current && !ShopOpenRef.current.contains(e.target)) { + setShopOpen(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + // Close mobile menu on outside click useEffect(() => { @@ -66,8 +81,9 @@ export default function Header() { {/* Desktop Navigation */}