close panels if University main menu is opened

src/components.d.ts

@@ -2009,6 +2009,7 @@ declare namespace LocalJSX {
   interface HyMenuMainGroup {
     dataMainMenu?: MainMenu[] | string;
     isMobile?: boolean;
+    onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
   }
   interface HyMenuMobileBreadcrumb {
     bid?: string;

src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx

@@ -6,7 +6,7 @@ export interface MainMenu {
   menuLinkId: string;
 }
 
-import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+import {Component, Host, h, Element, Prop, State, Watch, Listen, Event, EventEmitter} from '@stencil/core';
 
 let keys = {
   enter: 'Enter',
@@ -22,6 +22,7 @@ export class HyMenuMainGroup {
   @Prop() dataMainMenu: MainMenu[] | string;
   @Prop() isMobile: boolean = false;
   @State() isMenuOpen: boolean = false;
+  @Event() universityMainMenuToggled: EventEmitter;
 
   private _dataMainMenu: MainMenu[];
 
@@ -35,6 +36,7 @@ export class HyMenuMainGroup {
     this.isMenuOpen = !this.isMenuOpen;
 
     if (this.isMenuOpen) {
+      this.emitEvent();
       this.adjustMainMenuPosition(event.target);
     }
 
@@ -50,6 +52,7 @@ export class HyMenuMainGroup {
       this.isMenuOpen = !this.isMenuOpen;
 
       if (this.isMenuOpen) {
+        this.emitEvent();
         this.adjustMainMenuPosition(target);
 
         event.preventDefault();
@@ -57,6 +60,11 @@ export class HyMenuMainGroup {
     }
   }
 
+  emitEvent() {
+    // Close other panels if they are open (lang menu, search, main menu, ..).
+    this.universityMainMenuToggled.emit();
+  }
+
   adjustMainMenuPosition(target) {
     let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
 
@@ -104,6 +112,12 @@ export class HyMenuMainGroup {
     this.isMenuOpen = false;
   }
 
+  // CLose the University main menu if user opens the language menu panel.
+  @Listen('menuLanguageToggled', {target: 'document'})
+  languageMenuToggled() {
+    this.isMenuOpen = false;
+  }
+
   render() {
     const white = 'var(--grayscale-white)';
 

src/components/navigation/hy-menu-main-group/readme.md

@@ -9,6 +9,12 @@
 | `dataMainMenu` | `data-main-menu` |             | `MainMenu[] \| string` | `undefined` |
 | `isMobile`     | `is-mobile`      |             | `boolean`              | `false`     |
 
+## Events
+
+| Event                       | Description | Type               |
+| --------------------------- | ----------- | ------------------ |
+| `universityMainMenuToggled` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Used by

src/components/navigation/menu-language/menu-language.tsx

@@ -56,6 +56,12 @@ export class MenuLanguage {
     this.isMenuOpen = false;
   }
 
+  // Close the language menu if user opens University main menu
+  @Listen('universityMainMenuToggled', {target: 'document'})
+  universityMainMenuPanelToggled() {
+    this.isMenuOpen = false;
+  }
+
   @Listen('focus')
   handleComponentFocus(event) {
     // Close desktop menu panel if it's open.

src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx

@@ -271,6 +271,13 @@ export class HyDesktopMenuLinks {
     this.closePanel(fadeOut);
   }
 
+  // Close the desktop menu panel if user opens University main menu
+  @Listen('universityMainMenuToggled', {target: 'document'})
+  universityMainMenuPanelToggled() {
+    let fadeOut = true;
+    this.closePanel(fadeOut);
+  }
+
   // Close the desktop menu panel if user opens search panel
   @Listen('searchPanelToggled', {target: 'document'})
   searchPanelToggled() {

src/components/site-header/site-search/site-search.tsx

@@ -93,6 +93,12 @@ export class SiteSearch {
     this.closeSearchPanel();
   }
 
+  // Close the search panel if user opens University main menu
+  @Listen('universityMainMenuToggled', {target: 'document'})
+  universityMainMenuPanelToggled() {
+    this.closeSearchPanel();
+  }
+
   // CLose the search panel on Scroll down.
   @Listen('headerScrollDown', {target: 'document'})
   headerScrollDown() {