Skip to content

fix: close dropdown on outside click in MainHeader #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix: close dropdown on outside click in MainHeader #139

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 24 additions & 8 deletions src/components/Header/MainHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -66,8 +81,9 @@ export default function Header() {
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
{/* Shop Dropdown */}
<div className="relative">
<div className="relative" ref={ShopOpenRef} >
<button

onClick={() => setShopOpen(!shopOpen)}
className="group flex items-center gap-1 text-gray-700 hover:text-black transition"
>
Expand Down Expand Up @@ -105,15 +121,15 @@ export default function Header() {
Garage Sale
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
</Link>

<Link
to="/products"
className="relative text-gray-700 hover:text-black transition group"
>
All Products
<span className="absolute left-0 -bottom-1 w-0 h-[2px] bg-black transition-all duration-300 group-hover:w-full"></span>
</Link>

<Link
to="/about-corex"
className="relative text-gray-700 hover:text-black transition group"
Expand Down Expand Up @@ -142,15 +158,15 @@ export default function Header() {
>
<Heart className="h-5 w-5" />
</a>

<Link
to="/login"
aria-label="User Account"
className="transform transition-transform duration-200 hover:scale-110 hover:text-black"
>
<User className="h-5 w-5" />
</Link>

<a
href="#"
aria-label="Shopping Cart"
Expand Down Expand Up @@ -221,14 +237,14 @@ export default function Header() {
>
Garage Sale
</Link>

<Link
to="/products"
className="text-gray-700 hover:text-black transition"
>
All Products
</Link>

<Link
to="/about-corex"
className="text-gray-700 hover:text-black transition"
Expand Down Expand Up @@ -369,4 +385,4 @@ export default function Header() {
)}
</>
);
}
}