hy-menu-main-group.tsx

export interface MainMenu {
  label: string;
  url: string;
  menuLinkId: string;
}

import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';

@Component({
  tag: 'hy-menu-main-group',
  styleUrl: 'hy-menu-main-group.scss',
  shadow: true,
})
export class HyMenuMainGroup {
  @Element() el: HTMLElement;
  @Prop() dataMainMenu: MainMenu[] | string;
  @Prop() isMobile: boolean = false;
  @State() isMenuOpen: boolean = false;

  private _dataMainMenu: MainMenu[];

  @Watch('dataMainMenu')
  dataMainMenuWatcher(data: MainMenu[] | string) {
    this._dataMainMenu = typeof data === 'string' ? JSON.parse(data) : data;
  }

  @Listen('click')
  handleComponentClick(event) {
    this.isMenuOpen = !this.isMenuOpen;
    event.stopPropagation();
  }

  componentWillRender() {
    this.dataMainMenuWatcher(this.dataMainMenu);
  }

  render() {
    const white = 'var(--grayscale-white)';

    return this.isMobile ? (
      <div>Mobile Main Menu in Groups</div>
    ) : (
      <Host
        class={{
          'menu--main-group': true,
          'menu--main-group__is-open': this.isMenuOpen,
        }}
      >
        <button
          class={{
            'menu--main-group__toggle': true,
            'is-open': this.isMenuOpen,
          }}
          //aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
        >
          <hy-icon class={'menu--main-group__toggle__caret'} icon={'hy-icon-caret-down'} size={8} fill={white} />
          <span>University main menu</span>
        </button>
        <div
          class={{
            'menu--main-group__dropdown': true,
            'is-open': this.isMenuOpen,
          }}
        >
          {this._dataMainMenu.map((item) => {
            return (
              <a href={item.url} class={{'menu-main-link': true}}>
                <span class={'menu--main-group__label'}>{item.label}</span>
              </a>
            );
          })}
        </div>
      </Host>
    );
  }
}