x

apps/spa/src/components/DesktopMegaMenu.tsx

@@ -1,5 +1,5 @@
-import { useState, useRef } from 'react';
-import { Link } from 'react-router-dom';
+import { useState, useRef, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import type { MegaMenuPayload, MenuColumn } from '../store/menuStore';
 import { useTranslation } from 'react-i18next';
 import {
@@ -61,9 +61,17 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
   const [openId, setOpenId] = useState<string | null>(null);
   const [hoveredLinkImage, setHoveredLinkImage] = useState<string | null>(null);
   const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const location = useLocation();
   const { i18n } = useTranslation();
   const lang = i18n.language ? i18n.language.substring(0, 2) : 'en';
 
+  // Automatically close mega menu when route changes
+  useEffect(() => {
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    setOpenId(null);
+    setHoveredLinkImage(null);
+  }, [location.pathname, location.search]);
+
   // Open: cancel any pending close, reset hover image when switching root menu
   const handleOpen = (id: string) => {
     if (closeTimer.current) clearTimeout(closeTimer.current);
@@ -81,6 +89,12 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
     }, 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);
@@ -125,6 +139,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
             {/* Nav trigger */}
             <Link
               to={item.url || '#'}
+              onClick={handleLinkClick}
               className={`flex items-center gap-1 transition-colors py-2 border-b ${
                 isOpen
                   ? 'text-pop-black border-pop-black'
@@ -188,6 +203,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                                 >
                                   <Link
                                     to={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-pop-black/5"
                                   >
                                     <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-pop-black/10 bg-pop-bg text-pop-black/70 transition-colors group-hover:border-pop-black/30">
@@ -215,6 +231,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                                         <li key={childIndex}>
                                           <Link
                                             to={childLink.url || '#'}
+                                            onClick={handleLinkClick}
                                             className="block rounded-sm px-2 py-1.5 text-xs font-normal normal-case tracking-normal text-pop-black/60 transition-colors hover:bg-pop-black/5 hover:text-pop-black"
                                             onMouseEnter={() => setHoveredLinkImage(childLink.imageUrl || link.imageUrl || null)}
                                           >
@@ -226,6 +243,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                                         <li>
                                           <Link
                                             to={moreChildHref}
+                                            onClick={handleLinkClick}
                                             className="block rounded-sm px-2 py-1.5 text-xs font-semibold normal-case tracking-normal text-pop-black transition-colors hover:bg-pop-black/5"
                                           >
                                             {getMoreLabel(hiddenChildCount, lang)}
@@ -241,6 +259,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                         </ul>
                         <Link
                           to={item.url || '#'}
+                          onClick={handleLinkClick}
                           className="mt-7 flex items-center justify-between text-xs font-medium normal-case tracking-normal text-pop-black/60 transition-colors hover:text-pop-black"
                         >
                           <span>{getLocalizedText(item.label, lang)}</span>
@@ -257,6 +276,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                         </h4>
                         <Link
                           to={featuredHref}
+                          onClick={handleLinkClick}
                           className="group block overflow-hidden rounded-lg border border-pop-black/10 bg-pop-black/5 transition-colors hover:border-pop-black/30"
                           onMouseEnter={() => setHoveredLinkImage(configuredImage ?? featuredLink?.imageUrl ?? null)}
                           onMouseLeave={() => setHoveredLinkImage(null)}