Update version in package-solution.json and add global click outside handler in MegaMenuRenderer

config/package-solution.json

@@ -3,7 +3,7 @@
   "solution": {
     "name": "mega-menu-client-side-solution",
     "id": "f4660e06-ce08-43ee-bfb7-5c4464e01133",
-    "version": "1.0.7.0",
+    "version": "1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true
   },

src/extensions/megaMenu/MegaMenuRenderer.ts

@@ -227,6 +227,7 @@ export class MegaMenuRenderer {
         }
 
         this.attachGlobalKeyboardNavigation();
+        this.attachGlobalClickOutsideHandler();
     }
 
     private attachKeyboardNavigation(heading: HTMLElement, megaMenu: HTMLElement): void {
@@ -382,6 +383,25 @@ export class MegaMenuRenderer {
         });
     }
 
+    private attachGlobalClickOutsideHandler(): void {
+        document.addEventListener('click', (e: MouseEvent) => {
+            const eventTarget = e.target as Element;
+            const isInsideNavigation = !!(eventTarget && typeof eventTarget.closest === 'function' &&
+                eventTarget.closest('#CustomNavigation'));
+
+            if (isInsideNavigation) {
+                return;
+            }
+
+            const openMenu = document.querySelector('.mega-menu.js-open') as HTMLElement;
+
+            if (openMenu) {
+                debugLog(this.debug, LOG_SOURCE, 'Closing menu because of outside click.');
+                this.closeAllMegaMenus();
+            }
+        });
+    }
+
     private openMegaMenu(trigger: HTMLElement, menu: HTMLElement): void {
         this.closeAllMegaMenus(menu);
         trigger.setAttribute('aria-expanded', 'true');