@orangesk/orange-design-system 2.0.0-beta.9 → 2.0.0

package/src/components/Loader/tests/test.scss

@@ -2,4 +2,4 @@ div[style*="border:2px solid red;"] {
   .loader__line {
     animation: none !important;
   }
-}
+}

package/src/components/Megamenu/BrandMark.tsx

@@ -0,0 +1,15 @@
+import { Logo } from "./Logo";
+import { LogoJeTu } from "./LogoJeTu";
+
+export const BrandMark: React.FC = () => {
+  return (
+    <span data-megamenu-brand-mark>
+      <span data-megamenu-logo-full aria-hidden="true">
+        <LogoJeTu />
+      </span>
+      <span data-megamenu-logo-compact aria-hidden="true">
+        <Logo />
+      </span>
+    </span>
+  );
+};

package/src/components/Megamenu/Logo.tsx

@@ -0,0 +1,13 @@
+export const Logo: React.FC = () => {
+  return (
+    <svg
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
+      <path d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z" fill="white" />
+    </svg>
+  );
+};

package/src/components/Megamenu/LogoJeTu.tsx

@@ -0,0 +1,60 @@
+export const LogoJeTu: React.FC = () => {
+  return (
+    <svg
+      width="40"
+      height="67"
+      viewBox="0 0 40 67"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <g clipPath="url(#clip0_897_389)">
+        <rect width="40" height="40" fill="white" />
+        <rect width="40" height="40" fill="#FF7900" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M35.4467 29.1254H36.0214V28.8803H34.5679V29.1254H35.1425V30.7169H35.4467V29.1254ZM38.1126 30.7169H38.4154V28.8859H37.9521L37.4126 30.2803L36.8647 28.8859H36.3971V30.7169H36.7V29.1831H36.7084L37.3098 30.7169H37.5014L38.1028 29.1831H38.1126V30.7169Z"
+          fill="white"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M29.417 36.2296V30.969L28.1861 30.9718L28.0717 31.6068C27.9581 31.3346 27.5374 30.8676 26.4692 30.8676C25.2875 30.869 24.2354 31.9085 24.2354 33.7662C24.2354 35.6451 25.2565 36.5437 26.5508 36.5437C27.4001 36.5437 27.7537 36.1493 27.9861 35.7352L28.0058 35.7549V36.4014C28.0058 37.2704 27.6382 37.6338 26.879 37.6338C26.0607 37.6338 25.8945 37.3606 25.8339 37.0873L24.3903 37.3197C24.5931 38.2747 25.6058 38.7042 26.6973 38.7042C29.3466 38.6873 29.417 37.1592 29.417 36.2296ZM28.0116 33.4775C28.0116 34.2155 27.9187 35.3437 26.8088 35.3521C25.7356 35.3592 25.6877 34.2254 25.6877 33.538C25.6877 32.2859 26.2736 31.9028 26.799 31.9028C27.5891 31.9028 28.0116 32.6099 28.0116 33.4775Z"
+          fill="white"
+        />
+        <path
+          d="M18.2451 31.1366L19.455 30.969L19.5874 31.6281C20.2705 31.1281 20.8127 30.8619 21.4958 30.8619C22.6395 30.8619 23.2282 31.469 23.2282 32.6704V36.5394H21.7677V32.9253C21.7677 32.245 21.5902 31.9394 21.0634 31.9394C20.6268 31.9394 20.1916 32.1408 19.6958 32.5563V36.5422H18.2451V31.1366Z"
+          fill="white"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.8309 36.6085C14.4826 36.6109 15.1202 36.4186 15.6619 36.0563L15.7957 36.5451H17.0915V32.5169C17.0915 31.4958 16.2859 30.869 14.838 30.869C13.7769 30.8681 12.9873 31.2296 12.469 31.9535L13.4549 32.5169C13.7788 32.1009 14.2814 31.864 14.8084 31.8789C15.3746 31.8789 15.6816 32.1127 15.6816 32.5169V32.8254C13.3253 33.0916 12.1816 33.7507 12.1816 34.9944C12.1816 35.9183 12.7943 36.6085 13.8309 36.6085ZM14.2719 35.6099C13.8484 35.6099 13.6133 35.2614 13.6127 34.8887C13.6137 34.2319 14.2616 33.8816 15.6268 33.7085V35.024C15.1789 35.4183 14.7324 35.6099 14.2719 35.6099ZM13.6127 34.8887C13.6127 34.8882 13.6127 34.8878 13.6127 34.8873V34.8901C13.6127 34.8897 13.6127 34.8892 13.6127 34.8887Z"
+          fill="white"
+        />
+        <path
+          d="M8.6665 30.9859H10.0566V31.6394C10.4389 31.1829 10.9931 30.905 11.5876 30.8718C11.6507 30.8702 11.7138 30.8735 11.7764 30.8817V32.2535H11.7059C11.0693 32.2535 10.3735 32.3521 10.1566 32.8465V36.5422H8.6665V30.9859Z"
+          fill="white"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.16504 33.7733C2.16504 35.7845 3.46786 36.7057 4.91433 36.7057C6.35941 36.7057 7.66363 35.7873 7.66363 33.7775C7.66363 31.7676 6.36081 30.8451 4.91433 30.8451C3.46786 30.8451 2.16504 31.762 2.16504 33.7733ZM3.61982 33.7676C3.61982 33.0634 3.82263 32.0775 4.91418 32.0775C6.00573 32.0775 6.20855 33.0564 6.20855 33.7676C6.20855 34.4789 6.00573 35.4648 4.91418 35.4648C3.82263 35.4648 3.61982 34.4719 3.61982 33.7676Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M5.17969 48.9411V58.7468C5.17969 59.2294 5.12509 59.648 5.01562 60.0016C4.91726 60.3582 4.73898 60.6555 4.47949 60.8903C4.23191 61.1371 3.89372 61.3132 3.46875 61.4225C3.0428 61.5441 2.50378 61.6052 1.85352 61.6052C1.55111 61.6051 1.27791 61.5807 1.03418 61.5319L0.994141 61.5241V59.3054L1.06055 59.3298C1.18473 59.3749 1.35864 59.3991 1.58398 59.3991C1.84091 59.3991 2.06009 59.3467 2.24316 59.2438L2.24707 59.2419C2.42478 59.1581 2.52441 58.961 2.52441 58.6208V48.9411H5.17969ZM11.8213 48.6891C12.6199 48.6892 13.3186 48.8463 13.915 49.1628H13.9141C14.5085 49.4661 14.9944 49.8788 15.3711 50.4011C15.7592 50.9225 16.0385 51.5165 16.208 52.1823C16.3774 52.8477 16.437 53.5433 16.3887 54.2682L16.3857 54.3151H9.67871C9.72089 55.1097 9.92711 55.6774 10.29 56.029C10.6618 56.3892 11.1996 56.5729 11.9111 56.5729C12.4182 56.5729 12.8515 56.4489 13.2139 56.2038C13.5812 55.9431 13.7993 55.6758 13.8789 55.403L13.8896 55.3669H16.2461L16.2246 55.4323C15.8623 56.5556 15.3051 57.3652 14.5488 57.8532C13.7953 58.3393 12.885 58.5807 11.8213 58.5807C11.0842 58.5807 10.4178 58.4665 9.82324 58.236L9.82227 58.235C9.22819 57.9925 8.72374 57.653 8.31055 57.2155C7.89778 56.7784 7.57681 56.2565 7.34668 55.6511V55.6501C7.12849 55.044 7.01953 54.378 7.01953 53.653C7.01953 52.9515 7.13393 52.2972 7.36426 51.6911C7.59452 51.0852 7.9226 50.5629 8.34766 50.1257C8.77222 49.6771 9.27584 49.3254 9.85742 49.071C10.4523 48.816 11.1072 48.6891 11.8213 48.6891ZM32.832 48.9411V54.2468C32.832 55.0107 32.9512 55.5757 33.1836 55.9479L33.2773 56.072C33.5157 56.3432 33.8929 56.4831 34.4199 56.4831C35.1062 56.4831 35.5922 56.2819 35.8916 55.8903C36.1935 55.4835 36.3496 54.8133 36.3496 53.8688V48.9411H39.0059V58.3474H36.4756V57.0866C36.1522 57.6029 35.7387 57.981 35.2324 58.2165C34.7104 58.4592 34.1754 58.5807 33.6279 58.5807C33.0259 58.5807 32.5133 58.5119 32.0918 58.3718L31.917 58.3073C31.4782 58.1245 31.1281 57.8675 30.8701 57.5358V57.5349C30.6134 57.1925 30.4306 56.784 30.3213 56.3102L30.3203 56.3093C30.2236 55.8255 30.1758 55.2933 30.1758 54.7145V48.9411H32.832ZM27.167 46.1511V48.9411H29.0391V50.7507H27.167V55.3093C27.167 55.5226 27.1851 55.698 27.2197 55.8366C27.2544 55.9753 27.305 56.0741 27.3682 56.1374C27.4314 56.2007 27.5301 56.2521 27.6689 56.2868C27.8076 56.3215 27.9837 56.3386 28.1973 56.3386C28.3398 56.3386 28.4762 56.3328 28.6064 56.321C28.7368 56.3091 28.8614 56.2919 28.9795 56.2682L29.0391 56.2556V58.3395L28.9971 58.3464C28.7788 58.3827 28.5369 58.4066 28.2715 58.4186C28.0068 58.4307 27.7479 58.4372 27.4951 58.4372C27.0966 58.4372 26.7154 58.4069 26.3525 58.3464V58.3454C25.9998 58.2965 25.6819 58.194 25.4004 58.0349L25.3994 58.0339C25.1273 57.873 24.9109 57.6445 24.751 57.3493C24.5897 57.0515 24.5108 56.664 24.5107 56.1911V50.7507H22.9629V48.9411H24.5107V46.1511H27.167ZM11.749 50.7145C11.397 50.7146 11.0978 50.7697 10.8496 50.8766L10.7461 50.9255C10.4882 51.0544 10.2772 51.2174 10.1143 51.4147C9.96152 51.6145 9.85138 51.8264 9.78125 52.0485L9.78027 52.0475C9.72704 52.2502 9.69442 52.4329 9.67969 52.5954H13.7217C13.6007 51.9822 13.3926 51.5194 13.0986 51.2028L13.0977 51.2018C12.8104 50.8803 12.3642 50.7145 11.749 50.7145ZM5.17969 45.3952V47.6013H2.52441V45.3952H5.17969Z"
+        fill="var(--color-text-default)"
+        stroke="var(--color-text-default)"
+        strokeWidth="0.1"
+      />
+      <defs>
+        <clipPath id="clip0_897_389">
+          <rect width="40" height="40" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

package/src/components/Megamenu/MegaMenuIcon.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 export interface MegaMenuIconProps extends React.SVGAttributes<SVGSVGElement> {
   /** Accessible label for the icon. */

package/src/components/Megamenu/Megamenu.static.ts

@@ -1,12 +1,12 @@
 import {
-  CLASS_NAV_BUTTON,
-  CLASS_NAV_DROPDOWN,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_ICON,
+  CLASS_HIDE_LG_UP,
   CLASS_MOBILE,
   CLASS_MOBILE_OVERLAY,
-  CLASS_HIDE_LG_UP,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
   CLASS_OVERLAY,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_ICON,
 } from "./constants";
 
 interface MegamenuConfig {
@@ -15,6 +15,10 @@ interface MegamenuConfig {
   removeOnDestroy?: boolean;
 }
 
+const MODAL_OPEN_CLASS = "has-modal";
+const LOCKED_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+const BRAND_MARK_SELECTOR = "[data-megamenu-brand-mark]";
+
 const defaultConfig: Required<MegamenuConfig> = {
   dataToggle: "data-toggle",
   activeClass: "is-active",
@@ -26,18 +30,44 @@ export default class Megamenu {
   config!: Required<MegamenuConfig>;
   toggleButtons!: NodeListOf<HTMLButtonElement>;
   dropdowns!: NodeListOf<HTMLElement>;
-  mobileMenuButton!: HTMLButtonElement | null;
-  mobileMenu!: HTMLElement | null;
-  mobileOverlay!: HTMLElement | null;
-  mobileCloseButton!: HTMLButtonElement | null;
+  mobileMenuButtons!: HTMLButtonElement[];
+  mobilePanels!: HTMLElement[];
+  mobileCloseButtons!: HTMLButtonElement[];
+  activeMobilePanel!: HTMLElement | null;
+  activeMobileTarget!: string | null;
   desktopOverlay!: HTMLButtonElement | null;
   accordionButtons!: NodeListOf<HTMLButtonElement>;
+  desktopOverlayClickHandler!: (event: Event) => void;
+  mobileCloseHandler!: (event: Event) => void;
   focusTrapHandler!: (event: KeyboardEvent) => void;
+  focusTrapElement!: HTMLElement | null;
   lastFocusedElement!: HTMLElement | null;
   isKeyboardUser!: boolean;
   keydownHandler!: (e: KeyboardEvent) => void;
   mousedownHandler!: () => void;
   touchstartHandler!: () => void;
+  instanceName!: string;
+
+  private isModalOpen(): boolean {
+    return document.body.classList.contains(MODAL_OPEN_CLASS);
+  }
+
+  private getLockedScrollTop(): number | null {
+    const lockedScrollTopRaw = document.body.getAttribute(
+      LOCKED_SCROLL_TOP_ATTR,
+    );
+    const lockedScrollTop = Number.parseInt(lockedScrollTopRaw || "", 10);
+
+    return Number.isFinite(lockedScrollTop) ? lockedScrollTop : null;
+  }
+
+  private getEffectiveScrollY(): number {
+    if (!this.isModalOpen()) {
+      return window.scrollY;
+    }
+
+    return this.getLockedScrollTop() ?? window.scrollY;
+  }
 
   constructor(element: HTMLElement, config: MegamenuConfig = {}) {
     if ((element as any).ODS_Megamenu) {
@@ -53,6 +83,12 @@ export default class Megamenu {
     this.handleAccordionClick = this.handleAccordionClick.bind(this);
     this.handleArrowNavigation = this.handleArrowNavigation.bind(this);
     this.trapFocus = this.trapFocus.bind(this);
+    this.handleMobileMenuToggle = this.handleMobileMenuToggle.bind(this);
+    this.desktopOverlayClickHandler = () => this.closeAllDropdowns();
+    this.mobileCloseHandler = (event: Event) => {
+      event.preventDefault();
+      this.closeMobileMenu();
+    };
 
     (this.element as any).ODS_Megamenu = this;
 
@@ -71,15 +107,42 @@ export default class Megamenu {
     );
     this.dropdowns = this.element.querySelectorAll(`.${CLASS_NAV_DROPDOWN}`);
 
-    // Find mobile menu elements
-    this.mobileMenuButton = this.element.querySelector(
-      `.${CLASS_HIDE_LG_UP} button`,
-    ) as HTMLButtonElement;
-    this.mobileMenu = this.element.querySelector(`.${CLASS_MOBILE}`);
-    this.mobileOverlay = this.element.querySelector(`.${CLASS_MOBILE_OVERLAY}`);
-    this.mobileCloseButton = this.element.querySelector(
-      "[data-megamenu-close-button]",
-    ) as HTMLButtonElement;
+    // Resolve an optional instance name so external triggers can target this menu.
+    this.instanceName =
+      this.element.getAttribute("data-megamenu-name") || this.element.id || "";
+
+    // Find mobile panel elements.
+    this.mobilePanels = Array.from(
+      this.element.querySelectorAll(`.${CLASS_MOBILE}`),
+    );
+    this.activeMobilePanel = null;
+    this.activeMobileTarget = null;
+    this.focusTrapElement = null;
+
+    // Find all mobile toggles both in menu and in document scope.
+    const localToggleButtons = Array.from(
+      this.element.querySelectorAll(
+        `[data-megamenu-mobile-toggle], .${CLASS_HIDE_LG_UP} button`,
+      ),
+    ) as HTMLButtonElement[];
+    const globalToggleButtons = Array.from(
+      document.querySelectorAll(`[data-megamenu-mobile-toggle]`),
+    ) as HTMLButtonElement[];
+
+    this.mobileMenuButtons = Array.from(
+      new Set([...localToggleButtons, ...globalToggleButtons]),
+    ).filter((button) => this.shouldUseMobileTrigger(button));
+
+    this.mobileCloseButtons = Array.from(
+      this.element.querySelectorAll(
+        `.${CLASS_MOBILE_OVERLAY}, [data-megamenu-close-button]`,
+      ),
+    ) as HTMLButtonElement[];
+
+    this.mobilePanels.forEach((panel) => {
+      panel.setAttribute("aria-hidden", "true");
+    });
+    this.syncMobileButtonState();
 
     // Find desktop overlay element
     this.desktopOverlay = this.element.querySelector(
@@ -97,30 +160,18 @@ export default class Megamenu {
     });
 
     // Add mobile menu event listeners
-    if (this.mobileMenuButton) {
-      this.mobileMenuButton.addEventListener(
-        "click",
-        this.handleMobileMenuToggle.bind(this),
-      );
-    }
-    if (this.mobileOverlay) {
-      this.mobileOverlay.addEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
-    if (this.mobileCloseButton) {
-      this.mobileCloseButton.addEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
+    this.mobileMenuButtons.forEach((button) => {
+      button.addEventListener("click", this.handleMobileMenuToggle);
+    });
+    this.mobileCloseButtons.forEach((button) => {
+      button.addEventListener("click", this.mobileCloseHandler);
+    });
 
     // Add desktop overlay event listener
     if (this.desktopOverlay) {
       this.desktopOverlay.addEventListener(
         "click",
-        this.closeAllDropdowns.bind(this),
+        this.desktopOverlayClickHandler,
       );
     }
 
@@ -153,6 +204,105 @@ export default class Megamenu {
 
     // Set initial tab indices for accessibility
     this.updateTabIndices();
+    this.handleScroll();
+  }
+
+  shouldUseMobileTrigger(button: HTMLButtonElement) {
+    if (this.element.contains(button)) {
+      return true;
+    }
+
+    const targetName = button.getAttribute("data-megamenu-mobile-for");
+    if (!targetName) {
+      const allMegamenus = document.querySelectorAll("[data-megamenu]");
+      return allMegamenus.length === 1 && allMegamenus[0] === this.element;
+    }
+
+    if (!this.instanceName) {
+      return false;
+    }
+
+    return targetName === this.instanceName;
+  }
+
+  getDefaultMobileTarget() {
+    const firstPanel = this.mobilePanels[0];
+    return firstPanel?.getAttribute("data-megamenu-mobile-panel") || "main";
+  }
+
+  getTargetFromElement(control: HTMLElement | null) {
+    return (
+      control?.getAttribute("data-megamenu-mobile-target") ||
+      this.getDefaultMobileTarget()
+    );
+  }
+
+  getPanelByTarget(target: string) {
+    const matchingPanel = this.mobilePanels.find(
+      (panel) => panel.getAttribute("data-megamenu-mobile-panel") === target,
+    );
+
+    if (matchingPanel) {
+      return matchingPanel;
+    }
+
+    // Backward compatibility for existing markup with a single mobile panel.
+    if (
+      target === this.getDefaultMobileTarget() &&
+      this.mobilePanels.length === 1
+    ) {
+      return this.mobilePanels[0];
+    }
+
+    return null;
+  }
+
+  syncMobileButtonState() {
+    this.mobileMenuButtons.forEach((button) => {
+      const target = this.getTargetFromElement(button);
+      const isActive = this.activeMobileTarget === target;
+      button.setAttribute("aria-expanded", isActive ? "true" : "false");
+      button.classList.toggle(this.config.activeClass, isActive);
+    });
+  }
+
+  isInMobilePanel(element: HTMLElement | null) {
+    return Boolean(
+      element && this.mobilePanels.some((panel) => panel.contains(element)),
+    );
+  }
+
+  getFocusRestoreTarget() {
+    const lastFocused = this.lastFocusedElement;
+    if (
+      lastFocused &&
+      lastFocused.isConnected &&
+      !this.isInMobilePanel(lastFocused)
+    ) {
+      return lastFocused;
+    }
+
+    const target = this.activeMobileTarget;
+    if (target) {
+      const matchingTrigger = this.mobileMenuButtons.find(
+        (button) =>
+          this.getTargetFromElement(button) === target &&
+          !this.isInMobilePanel(button),
+      );
+      if (matchingTrigger) {
+        return matchingTrigger;
+      }
+    }
+
+    return (
+      this.mobileMenuButtons.find((button) => !this.isInMobilePanel(button)) ||
+      null
+    );
+  }
+
+  setMobilePanelState(panel: HTMLElement, isOpen: boolean) {
+    panel.classList.toggle(this.config.activeClass, isOpen);
+    panel.setAttribute("aria-hidden", isOpen ? "false" : "true");
   }
 
   handleToggleClick(event: Event) {
@@ -283,15 +433,24 @@ export default class Megamenu {
     const topElement = this.element.querySelector(
       '[data-hide-when-sticky="true"]',
     ) as HTMLElement;
+    const hasBrandMark = Boolean(
+      this.element.querySelector(BRAND_MARK_SELECTOR),
+    );
+    const effectiveScrollY = this.getEffectiveScrollY();
+    const hideThreshold = topElement?.offsetHeight || 15;
+    const shouldHideTop = effectiveScrollY > hideThreshold;
+    const isTopHidden = this.element.classList.contains("top-hidden");
 
     if (topElement) {
-      if (window.scrollY > 15) {
+      if (shouldHideTop && !isTopHidden) {
         topElement.classList.add("is-hidden");
         this.element.classList.add("top-hidden");
-      } else {
+      } else if (!shouldHideTop && isTopHidden) {
         topElement.classList.remove("is-hidden");
         this.element.classList.remove("top-hidden");
       }
+    } else if (this.element.classList.contains("is-sticky") && hasBrandMark) {
+      this.element.classList.toggle("top-hidden", shouldHideTop);
     }
   }
 
@@ -333,53 +492,96 @@ export default class Megamenu {
 
   handleMobileMenuToggle(event: Event) {
     event.preventDefault();
-    if (this.mobileMenu?.classList.contains(this.config.activeClass)) {
+    const trigger = event.currentTarget as HTMLButtonElement;
+    const target = this.getTargetFromElement(trigger);
+    const panel = this.getPanelByTarget(target);
+
+    if (!panel) {
+      return;
+    }
+
+    if (
+      this.activeMobileTarget === target &&
+      panel.classList.contains(this.config.activeClass)
+    ) {
       this.closeMobileMenu();
     } else {
-      this.openMobileMenu();
+      this.openMobileMenu(target, trigger);
     }
   }
 
-  openMobileMenu() {
-    if (this.mobileMenu) {
-      // Store the element that opened the menu for focus restoration
-      this.lastFocusedElement = document.activeElement as HTMLElement;
+  openMobileMenu(target = this.getDefaultMobileTarget(), source?: HTMLElement) {
+    const panel = this.getPanelByTarget(target);
 
-      this.mobileMenu.classList.add(this.config.activeClass);
-      document.body.style.overflow = "hidden"; // Prevent background scrolling
+    if (!panel) {
+      return;
+    }
 
-      // Set up focus trap immediately to prevent focus escape
-      this.trapFocus(this.mobileMenu);
+    // Store the element that opened the menu for focus restoration
+    // BEFORE changing panel states, so activeElement is captured correctly.
+    this.lastFocusedElement =
+      source || (document.activeElement as HTMLElement | null);
 
-      // Only manage focus if user is using keyboard navigation (not touch)
-      if (this.isKeyboardUser) {
-        // Focus first focusable element in mobile menu for keyboard users
-        const firstFocusable = this.mobileMenu.querySelector(
-          "button, a",
-        ) as HTMLElement;
-        if (firstFocusable) {
-          // Reduced delay for better responsiveness
-          setTimeout(() => firstFocusable.focus(), 50);
-        }
+    // Move focus out of any panel about to be hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const focused = document.activeElement as HTMLElement | null;
+    if (
+      focused &&
+      focused !== panel &&
+      this.mobilePanels.some((p) => p !== panel && p.contains(focused))
+    ) {
+      focused.blur();
+    }
+
+    // Keep one side panel active at a time.
+    this.mobilePanels.forEach((mobilePanel) => {
+      this.setMobilePanelState(mobilePanel, mobilePanel === panel);
+    });
+    this.activeMobilePanel = panel;
+    this.activeMobileTarget = target;
+    this.syncMobileButtonState();
+
+    document.body.style.overflow = "hidden";
+    this.removeFocusTrap();
+    this.trapFocus(panel);
+
+    if (this.isKeyboardUser) {
+      const firstFocusable = panel.querySelector("button, a") as HTMLElement;
+      if (firstFocusable) {
+        setTimeout(() => firstFocusable.focus(), 50);
       }
     }
+
+    this.updateTabIndices();
   }
 
   closeMobileMenu() {
-    if (this.mobileMenu) {
-      this.mobileMenu.classList.remove(this.config.activeClass);
-      document.body.style.overflow = ""; // Restore scrolling
-      this.closeAllAccordions(); // Close any open accordions
-
-      // Remove focus trap (safe to call even if not active)
-      this.removeFocusTrap();
+    if (!this.activeMobilePanel) {
+      return;
+    }
 
-      // Return focus to element that opened the menu only for keyboard users
-      if (this.isKeyboardUser && this.lastFocusedElement) {
-        this.lastFocusedElement.focus();
-      }
-      this.lastFocusedElement = null;
+    // Move focus out of the panel BEFORE setting aria-hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const restoreTarget = this.getFocusRestoreTarget();
+    if (restoreTarget) {
+      restoreTarget.focus();
+    } else {
+      (document.activeElement as HTMLElement | null)?.blur?.();
     }
+
+    this.mobilePanels.forEach((panel) => {
+      this.setMobilePanelState(panel, false);
+    });
+
+    document.body.style.overflow = "";
+    this.closeAllAccordions();
+    this.removeFocusTrap();
+
+    this.activeMobilePanel = null;
+    this.activeMobileTarget = null;
+    this.lastFocusedElement = null;
+    this.syncMobileButtonState();
+    this.updateTabIndices();
   }
 
   showDesktopOverlay() {
@@ -497,12 +699,17 @@ export default class Megamenu {
       }
     };
 
+    this.focusTrapElement = element;
     element.addEventListener("keydown", this.focusTrapHandler);
   }
 
   removeFocusTrap() {
-    if (this.mobileMenu && this.focusTrapHandler) {
-      this.mobileMenu.removeEventListener("keydown", this.focusTrapHandler);
+    if (this.focusTrapElement && this.focusTrapHandler) {
+      this.focusTrapElement.removeEventListener(
+        "keydown",
+        this.focusTrapHandler,
+      );
+      this.focusTrapElement = null;
     }
   }
 
@@ -526,18 +733,18 @@ export default class Megamenu {
     });
 
     // Also update mobile menu elements when mobile menu is active
-    if (this.mobileMenu) {
-      const isMobileMenuActive = this.mobileMenu.classList.contains(
+    this.mobilePanels.forEach((panel) => {
+      const isMobilePanelActive = panel.classList.contains(
         this.config.activeClass,
       );
-      const mobileMenuFocusableElements = this.mobileMenu.querySelectorAll(
+      const mobilePanelFocusableElements = panel.querySelectorAll(
         "a, button, [tabindex]:not([tabindex='-1'])",
       ) as NodeListOf<HTMLElement>;
 
-      mobileMenuFocusableElements.forEach((element) => {
-        element.tabIndex = isMobileMenuActive ? 0 : -1;
+      mobilePanelFocusableElements.forEach((element) => {
+        element.tabIndex = isMobilePanelActive ? 0 : -1;
       });
-    }
+    });
   }
 
   destroy() {
@@ -547,30 +754,18 @@ export default class Megamenu {
     });
 
     // Remove mobile menu event listeners
-    if (this.mobileMenuButton) {
-      this.mobileMenuButton.removeEventListener(
-        "click",
-        this.handleMobileMenuToggle.bind(this),
-      );
-    }
-    if (this.mobileOverlay) {
-      this.mobileOverlay.removeEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
-    if (this.mobileCloseButton) {
-      this.mobileCloseButton.removeEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
+    this.mobileMenuButtons.forEach((button) => {
+      button.removeEventListener("click", this.handleMobileMenuToggle);
+    });
+    this.mobileCloseButtons.forEach((button) => {
+      button.removeEventListener("click", this.mobileCloseHandler);
+    });
 
     // Remove desktop overlay event listener
     if (this.desktopOverlay) {
       this.desktopOverlay.removeEventListener(
         "click",
-        this.closeAllDropdowns.bind(this),
+        this.desktopOverlayClickHandler,
       );
     }
 
@@ -589,6 +784,7 @@ export default class Megamenu {
 
     // Restore body overflow if menu was open
     document.body.style.overflow = "";
+    this.removeFocusTrap();
 
     // Clean up instance reference
     (this.element as any).ODS_Megamenu = null;