fix(nav): optimize dropdown behavior on navigation and scroll
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 44s
Build & Deploy / 🧪 QA (push) Has started running
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled

This commit is contained in:
2026-06-15 15:24:46 +02:00
parent 394ac5a19c
commit 30047cb1c4

View File

@@ -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'