From 30047cb1c4d20545d66ed68a543b06fe53c01de3 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Mon, 15 Jun 2026 15:24:46 +0200
Subject: [PATCH] fix(nav): optimize dropdown behavior on navigation and scroll

---
 components/layout/Header.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index da57baaea..6e0eeb5d7 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -165,6 +165,20 @@ export function Header({ navLinks }: HeaderProps) {
 function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink, currentLocale: string, pathname: string, isSolidMode: boolean }) {
   const [isHovered, setIsHovered] = React.useState(false);
 
+  // Close dropdown on navigation
+  React.useEffect(() => {
+    setIsHovered(false);
+  }, [pathname]);
+
+  // Close dropdown on scroll
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (isHovered) setIsHovered(false);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isHovered]);
+
   const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
     ? `/${currentLocale}${link.url}` 
     : link.url;
@@ -237,6 +251,7 @@ function NavItem({ link, currentLocale, pathname, isSolidMode }: { link: NavLink
                   <TransitionLink
                     key={child.url}
                     href={childUrl}
+                    onClick={() => setIsHovered(false)}
                     className={`group/dropitem relative block px-4 py-3.5 rounded-2xl text-sm font-medium transition-all duration-300 overflow-hidden ${
                       isSolidMode
                         ? isChildActive ? 'bg-primary/10 text-primary' : 'text-neutral-600 hover:text-primary hover:bg-neutral-50/80'