close menu lang when desktop panel is open and vice versa

src/components.d.ts

@@ -1559,6 +1559,7 @@ declare namespace LocalJSX {
   }
   interface HyDesktopMenuLinks {
     dataDesktopLinks?: DesktopLinks[] | string;
+    onMenuDesktopToggled?: (event: CustomEvent<any>) => void;
   }
   interface HyDocsContainer {}
   interface HyDropdown {
@@ -1860,6 +1861,7 @@ declare namespace LocalJSX {
     dataMenuLanguage?: MenuLanguage[] | string;
     isMobile?: boolean;
     labels?: ComponentLabels[] | string;
+    onMenuLanguageToggled?: (event: CustomEvent<any>) => void;
   }
   interface HyMenuLanguageItem {
     abbr?: string;

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

@@ -8,7 +8,7 @@ export interface MenuLanguage {
   isActive?: boolean;
 }
 
-import {Component, h, Prop, Host, Watch, Element, Listen, State} from '@stencil/core';
+import {Component, h, Prop, Host, Watch, Element, Listen, State, Event, EventEmitter} from '@stencil/core';
 
 @Component({
   tag: 'hy-menu-language',
@@ -21,6 +21,9 @@ export class MenuLanguage {
   @Prop() isMobile: boolean = false;
   @Prop() labels?: ComponentLabels[] | string;
   @State() isMenuOpen: boolean = false;
+
+  @Event() menuLanguageToggled: EventEmitter;
+
   private _dataMenuLanguage: MenuLanguage[];
   private _labels: ComponentLabels[];
 
@@ -32,19 +35,36 @@ export class MenuLanguage {
     this._labels = typeof data === 'string' ? JSON.parse(data) : data;
   }
 
+  // Close the language menu if user clicks anywhere outside the Menu language component.
   @Listen('click', {target: 'window'})
   handleOutsideMenuClick(event) {
-    // Close the language menu if user clicks anywhere outside the Menu language component.
     this.isMenuOpen = false;
     event.stopPropagation();
   }
 
+  // CLose the language menu if user opens the desktop menu panel.
+  @Listen('menuDesktopToggled', {target: 'document'})
+  desktopMenuToggled() {
+    this.isMenuOpen = false;
+  }
+
+  @Listen('focus')
+  handleComponentFocus(event) {
+    // Close desktop menu panel if it's open.
+    this.menuLanguageToggled.emit();
+
+    event.stopPropagation();
+  }
+
   @Listen('click')
   handleComponentClick(event) {
     this.isMenuOpen = !this.isMenuOpen;
     const languageMenuSelector = event.target as HTMLElement;
 
     if (this.isMenuOpen) {
+      // Close desktop menu panel if it's open.
+      this.menuLanguageToggled.emit();
+
       let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
       const headerHeight = `${
         languageMenuSelector.offsetHeight +

src/components/navigation/menu-language/readme.md

@@ -10,6 +10,12 @@
 | `isMobile`         | `is-mobile`          |             | `boolean`                     | `false`     |
 | `labels`           | `labels`             |             | `ComponentLabels[] \| string` | `undefined` |
 
+## Events
+
+| Event                 | Description | Type               |
+| --------------------- | ----------- | ------------------ |
+| `menuLanguageToggled` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Used by

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

@@ -19,7 +19,7 @@ export interface DesktopLinks {
 }
 
 import {ColorVariant} from '../../../utils/utils';
-import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
+import {Component, h, Element, Prop, State, Watch, EventEmitter, Event, Listen} from '@stencil/core';
 
 @Component({
   tag: 'hy-desktop-menu-links',
@@ -39,6 +39,8 @@ export class HyDesktopMenuLinks {
   @State() isDesktopMenuOpen: boolean = false;
   @State() currenOpenMenuId: number = 0;
 
+  @Event() menuDesktopToggled: EventEmitter;
+
   private _submenuLeftMargin: number = 32;
   private _headerBorderOffset: number = 0;
 
@@ -70,7 +72,22 @@ export class HyDesktopMenuLinks {
 
   showPanel(id) {
     // Close menu lang menu if it's open
-    //this.closeLangMenu();
+    this.menuDesktopToggled.emit();
+
+    /*
+  @Listen('handleClick', {capture: true}) handleClick() {
+      this.menuContainerToggled.emit({
+        triggerItem: this.menuLinkId,
+        triggerType: 'add',
+      });
+      const currentParent = this.el.parentNode;
+      this.addBreadcrumb.emit({
+        url: this.url,
+        label: currentParent.parentElement.getAttribute('label'),
+        bid: this.menuLinkId,
+      });
+    }
+     */
 
     // Open desktop menu panel
     this.isDesktopMenuOpen = true;
@@ -89,6 +106,7 @@ export class HyDesktopMenuLinks {
       item.classList.remove('hy-desktop-menu-panel--is-active');
       item.setAttribute('aria-hidden', 'true');
       (item as HTMLElement).style.transition = 'none';
+      (item as HTMLElement).style.opacity = '0';
     });
 
     // Add active classes to the currently active item and its sibling element.
@@ -114,7 +132,6 @@ export class HyDesktopMenuLinks {
     const headerHeight = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
       ? `${this.el.parentElement.offsetHeight + this._headerBorderOffset}px`
       : `${this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset}px`;
-    console.log(this.el.parentElement.offsetTop + ' ' + this.el.parentElement.offsetHeight);
     activeMenuItemSibling.style.top = headerHeight;
 
     // Add shadow backdrop
@@ -190,6 +207,13 @@ export class HyDesktopMenuLinks {
     event.stopPropagation();
   }
 
+  // CLose the desktop menu panel if user opens the language menu.
+  @Listen('menuLanguageToggled', {target: 'document'})
+  menuLanguageToggled() {
+    let fadeOut = true;
+    this.closePanel(fadeOut);
+  }
+
   handleDesktopMenuEnter(event, id) {
     this._hoverTimer = setTimeout(() => {
       const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;

src/components/site-header/hy-desktop-menu-links/readme.md

@@ -8,6 +8,12 @@
 | ------------------ | -------------------- | ----------- | -------------------------- | ----------- |
 | `dataDesktopLinks` | `data-desktop-links` |             | `DesktopLinks[] \| string` | `undefined` |
 
+## Events
+
+| Event                | Description | Type               |
+| -------------------- | ----------- | ------------------ |
+| `menuDesktopToggled` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Used by