From 520d5aeb56b1ab30aa4be6e55b28f9b623a3a5df Mon Sep 17 00:00:00 2001
From: katja <ekaterina.kondareva@druid.fi>
Date: Thu, 4 Mar 2021 22:23:06 +0200
Subject: [PATCH] close panels if University main menu is opened

---
 src/components.d.ts                              |  1 +
 .../hy-menu-main-group/hy-menu-main-group.tsx    | 16 +++++++++++++++-
 .../navigation/hy-menu-main-group/readme.md      |  6 ++++++
 .../navigation/menu-language/menu-language.tsx   |  6 ++++++
 .../hy-desktop-menu-links.tsx                    |  7 +++++++
 .../site-header/site-search/site-search.tsx      |  6 ++++++
 6 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 14784e38..0c3b055a 100644
--- a/src/components.d.ts
+++ b/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;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 5ad28207..eec4f3fc 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/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)';
 
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index 5211b414..ebe82bef 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/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
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index a13f8aab..2ad38810 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/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.
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 405849de..1d41aa0b 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/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() {
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index cd8fb081..97d1446d 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/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() {
-- 
GitLab