x

apps/website/src/components/navigation/DesktopMegaMenu.tsx

@@ -2,7 +2,7 @@
 
 import Link from '../LocalizedLink'
 import Image from 'next/image'
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import {
   ArrowRight,
   ChevronRight,
@@ -86,6 +86,13 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
   const [hoveredLinkImage, setHoveredLinkImage] = useState<string | null>(null)
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
+  // Automatically close mega menu when route changes
+  useEffect(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current)
+    setOpenId(null)
+    setHoveredLinkImage(null)
+  }, [currentPath])
+
   const handleOpen = (id: string) => {
     if (closeTimer.current) clearTimeout(closeTimer.current)
     if (openId !== id) setHoveredLinkImage(null)
@@ -99,6 +106,12 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
     }, 150)
   }
 
+  const handleLinkClick = () => {
+    if (closeTimer.current) clearTimeout(closeTimer.current)
+    setOpenId(null)
+    setHoveredLinkImage(null)
+  }
+
   const getFirstImageLink = (columns: MenuColumn[] = []) => {
     for (const column of columns) {
       const found = column.links.find((link) => link.imageUrl)
@@ -143,6 +156,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
           >
             <Link
               href={item.url || '#'}
+              onClick={handleLinkClick}
               className={`flex items-center gap-1 border-b py-2 transition-colors ${
                 isOpen || isActive
                   ? 'border-brand-primary text-text-main'
@@ -206,6 +220,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                                 >
                                   <Link
                                     href={link.url || link.links?.[0]?.url || '#'}
+                                    onClick={handleLinkClick}
                                     className="group flex items-center gap-4 rounded-md px-1 py-2.5 text-left transition-colors hover:bg-surface-muted"
                                   >
                                     <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-line-primary/20 bg-surface-page text-brand-primary transition-colors group-hover:border-brand-primary/40">
@@ -233,6 +248,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                                         <li key={childIndex}>
                                           <Link
                                             href={childLink.url || '#'}
+                                            onClick={handleLinkClick}
                                             className="block rounded-sm px-2 py-1.5 text-xs font-normal normal-case tracking-normal text-muted-text transition-colors hover:bg-surface-muted hover:text-brand-primary"
                                             onMouseEnter={() => setHoveredLinkImage(childLink.imageUrl || link.imageUrl || null)}
                                           >
@@ -244,6 +260,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                                         <li>
                                           <Link
                                             href={moreChildHref}
+                                            onClick={handleLinkClick}
                                             className="block rounded-sm px-2 py-1.5 text-xs font-semibold normal-case tracking-normal text-brand-primary transition-colors hover:bg-surface-muted"
                                           >
                                             {getMoreLabel(hiddenChildCount, lang)}
@@ -259,6 +276,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                         </ul>
                         <Link
                           href={item.url || '#'}
+                          onClick={handleLinkClick}
                           className="mt-7 flex items-center justify-between text-xs font-medium normal-case tracking-normal text-text-main/65 transition-colors hover:text-brand-primary"
                         >
                           <span>{getLocalizedMenuText(item.label, lang)}</span>
@@ -275,6 +293,7 @@ export function DesktopMegaMenu({ items, lang, currentPath }: DesktopMegaMenuPro
                         </h4>
                         <Link
                           href={featuredHref}
+                          onClick={handleLinkClick}
                           className="group block overflow-hidden rounded-lg border border-line-primary/20 bg-surface-page transition-colors hover:border-brand-primary/40"
                           onMouseEnter={() => setHoveredLinkImage(configuredImage ?? featuredLink?.imageUrl ?? null)}
                           onMouseLeave={() => setHoveredLinkImage(null)}