menu.tsx

import {Component, Prop, Listen, h, State, Event, EventEmitter, Element} from '@stencil/core';
import {DonateLink} from '../../site-header/site-header';

@Component({
  tag: 'hy-menu',
  styleUrl: 'menu.scss',
  shadow: true
})
export class Menu {
  @Element() el: HTMLElement;
  @Prop() open = true;
  @Prop() menuType: string = 'desktop';
  @Prop() logoUrl: string;
  @Prop() logoLabel: string;
  @Prop() dataMenuDonate: string;
  @Prop() dataMenuLanguage: string;
  @State() breadcrumbs: any;
  @Event() menuContainerToggled: EventEmitter;
  private donateLink: DonateLink[];

  @Listen('removeBreadcrumb') removeBreadcrumb(data) {
    let breadcrumbs = JSON.parse(JSON.stringify(this.breadcrumbs));
    let currentBreadcrumb = breadcrumbs
      .map(function (e) {
        return e.bid;
      })
      .indexOf(data.detail.bid);
    breadcrumbs.length = currentBreadcrumb;

    for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
      this.menuContainerToggled.emit({triggerItem: this.breadcrumbs[i].bid, triggerType: 'remove'});
    }
    this.breadcrumbs = [];
    this.breadcrumbs = breadcrumbs;

    // Reset if home has been clicked.
    if (currentBreadcrumb === 0) {
      this.breadcrumbs = [];
    }
  }

  @Listen('addBreadcrumb') addBreadcrumb(event) {
    this.breadcrumbs = [
      ...this.breadcrumbs,
      {
        label: event.detail.label,
        bid: event.detail.bid,
        url: event.detail.url
      }
    ];
  }

  componentWillLoad() {
    this.breadcrumbs = [];
  }

  componentWillUpdate() {
    this.el.children[0].setAttribute('menu-type', this.menuType);
  }

  componentWillRender() {
    const siteHeader = this.el.closest('hy-site-header');
    this.donateLink = JSON.parse(siteHeader.getAttribute('data-menu-donate'));
  }

  render() {
    return this.menuType === 'desktop' ? (
      <div class={'hy-wrapper'}>
        <nav
          role={'navigation'}
          class={{
            'hy-menu-wrapper': true,
            'is-open': this.open
          }}
        >
          <div class={'hy-menu hy-menu--desktop'}>
            <slot />
          </div>
        </nav>
      </div>
    ) : (
      <nav
        role={'navigation'}
        class={{
          'hy-menu-wrapper': true,
          'is-open': this.open
        }}
      >
        <div class={'hy-menu__logo'} id={'menu-logo'}>
          <hy-site-logo
            menu-type={this.menuType}
            menu-is-expanded={this.open}
            url={this.logoUrl}
            label={this.logoLabel}
            color={'var(--brand-main-nearly-black)'}
          />
        </div>
        <div id={'menu-bc-container'} class={'hy-menu__breadcrumbs'}>
          <hy-menu-language is-mobile={this.menuType !== 'desktop'} data-menu-language={this.dataMenuLanguage} />
          {this.breadcrumbs.map((breadcrumb, index) => {
            return <hy-menu-mobile-breadcrumb label={breadcrumb.label} bid={breadcrumb.bid} is-first={index === 0} />;
          })}
        </div>
        <div
          aria-hidden={this.open ? 'false' : 'true'}
          class={{
            'hy-menu': true,
            'is-open': this.open
          }}
        >
          <slot />
        </div>
        <div class={'hy-link__donate'}>
          {this.donateLink.map((i) => {
            return <a href={i.url}>{i.label}</a>;
          })}
        </div>
      </nav>
    );
  }
}