hy-desktop-menu-panel.tsx

import {Component, h} from '@stencil/core';
import {ColorVariant} from '../../../utils/utils';

@Component({
  tag: 'hy-desktop-menu-panel',
  styleUrl: 'hy-desktop-menu-panel.scss',
  shadow: true,
})
export class HyDesktopMenuPanel {
  closeDesktopMenuPanel() {
    let hySiteHeader = document.querySelectorAll('hy-site-header')[0];

    // Remove is-active from desktop menu links.
    let hyDesktopMenuLinks = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-links');
    let desktopMenuItems = hyDesktopMenuLinks.shadowRoot.querySelectorAll('.desktop-menu-link');
    desktopMenuItems.forEach((item) => {
      (item as HTMLElement).classList.remove('desktop-menu-link--is-active');
    });

    // Close desktop menu panel.
    let hyDesktopPanel = hySiteHeader.shadowRoot.querySelector('hy-desktop-menu-panel');
    if (hyDesktopPanel) {
      //hide panel, remove class is-active
      (hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');

      let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
      if (parentMenu) {
        const items = Array.from(parentMenu);
        items.forEach((item) => {
          item.classList.add('hy-menu-level-container--mobile');
          item.classList.remove('hy-menu-level-container--desktop');
        });
      }
    }
  }

  render() {
    const classAttributes = ['hy-desktop-menu-panel'].join(' ');

    return (
      <div class={classAttributes} onMouseLeave={() => this.closeDesktopMenuPanel()}>
        <div class="hy-desktop-menu-panel__desktop-menu">
          <slot></slot>
        </div>
        <button
          onClick={() => this.closeDesktopMenuPanel()}
          class={{
            'hy-desktop-menu-panel__panel-toggle': true,
          }}
          aria-label="close"
        >
          <span class="hy-desktop-menu-panel__panel-toggle__label">
            CLOSE
            <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
          </span>
        </button>
      </div>
    );
  }
}