header.component.html

<header
  #headerEl
  role="presentation"
  class="container"
  [class.compact]="isCompactActive"
>
  <div class="row end">
    <div
      class="col l5 m8 s4 middle logo-menu-container no-gutters"
      role="banner"
    >
      <a
        routerLink="/"
        class="logo-container"
        [attr.aria-label]="'Orcid home' + labelLogo"
      >
        <img
          src="./assets/vectors/orcid.logo.svg"
          alt="orcid logo"
          id="home-logo"
        />
        <div
          role="link"
          class="orc-font-body-small"
          *ngIf="platform.columns12 && !isCompactActive"
          i18n="@@confirm-oauth-access.connectingresearchandresearchers"
        >
          Connecting research and researchers
        </div>
      </a>
      <div class="col no-gutters" role="navigation">
        <div *ngIf="!platform.columns12" class="row middle no-gutters">
          <div *ngIf="mobileMenuState" class="col no-gutters">
            <app-language
              class="col no-gutters"
              id="cy-language-mob"
            ></app-language>
          </div>
          <div *ngIf="!mobileMenuState" class="col no-gutters">
            <app-user-menu></app-user-menu>
          </div>

          <app-menu-icon
            (click)="toggleMobileMenu()"
            [isOpen]="mobileMenuState"
          ></app-menu-icon>
        </div>
      </div>
    </div>
    <div
      class="col l6 offset-l1 m8 s4 middle no-gutters"
      *ngIf="platform.columns12"
    >
      <app-search [hideForm]="isCompactActive"></app-search>
    </div>
  </div>
</header>

<!-- Compact-record header renders under the main header when compact mode is active -->
<div
  class="compact-record-header"
  *ngIf="isCompactActive && (isPublicRecord$ | async) as publicId"
>
  <app-record-header></app-record-header>
</div>
<!-- Mobile/tablet spacer to offset fixed compact record header -->
<div
  class="compact-record-header-spacer"
  *ngIf="!platform.columns12 && isCompactActive && (isPublicRecord$ | async)"
></div>

<mat-divider></mat-divider>

<div
  class="col l5 offset-l3 m8 s4 middle"
  *ngIf="!platform.columns12 && !isCompactActive && !mobileMenuState"
>
  <app-search></app-search>
</div>

<!-- MAIN MENU -->
<nav
  (mouseleave)="mouseLeave()"
  *ngIf="(mobileMenuState || platform.columns12) && !hideMainMenu"
  [ngClass]="{
    'not-wordpress-display': notWordpressDisplay,
    'mobile-nav-overlay': !platform.columns12 && mobileMenuState
  }"
  [attr.aria-label]="labelMenu"
  [attr.aria-modal]="!platform.columns12 && mobileMenuState ? true : null"
  [attr.aria-hidden]="!platform.columns12 && !mobileMenuState ? true : null"
  [cdkTrapFocus]="!platform.columns12 && mobileMenuState"
  [cdkTrapFocusAutoCapture]="false"
>
  <!-- TODO @leomendoza123 Once the new info site is stable, remove this togglz hidden to save render time -->
  <div class="top-bar-new-info">
    <div
      #mobileMenuContainer
      class="menu-container"
      [ngClass]="{ container: platform.columns12 }"
      tabindex="-1"
    >
      <ul
        class="row mobile-auth-menu"
        *ngIf="checkMenuItemRequirements({ desktop: false })"
      >
        <li
          class="col no-gutters"
          *ngIf="
            checkMenuItemRequirements({ logging: false }) &&
            signinRegisterButton
          "
        >
          <button
            mat-button
            class="top-menu-button sign-in-button"
            [ngClass]="{ active: activeMenuItemId === 'header-signin' }"
            (click)="onNavClick('signin', 'header-signin')"
          >
            <ng-container i18n="@@header.signin">Sign in</ng-container
            >&nbsp;/&nbsp;<ng-container i18n="@@header.register"
              >Register</ng-container
            >
          </button>
        </li>
        <li
          class="col no-gutters"
          *ngIf="checkMenuItemRequirements({ logging: true })"
        >
          <button
            mat-button
            class="top-menu-button sign-in-button"
            [ngClass]="{ active: activeMenuItemId === 'header-signout' }"
            (click)="onNavClick('signout', 'header-signout')"
          >
            <ng-container i18n="#upperCase@@public-layout.sign_out"
              >SIGN OUT</ng-container
            >
          </button>
        </li>
      </ul>
      <ng-template #recursiveList let-list let-parents="parents">
        <ul class="row" *ngIf="!isDesktopThirdLevelMenu(parents)">
          <ng-container *ngFor="let item of list">
            <li
              class="col no-gutters button-wrapper"
              *ngIf="checkMenuItemRequirements(item.requirements) === true"
            >
              <button
                [ngClass]="{ active: isMenuItemActive(item) }"
                class="top-menu-button"
                mat-button
                [color]="menuButtonColor(parents)"
                (focus)="mouseEnter(parents.concat(item.id))"
                (click)="click(parents.concat(item.id), item)"
                (mouseenter)="mouseEnter(parents.concat(item.id))"
                [id]="item.id"
              >
                <div class="button-box">
                  <div>{{ item.label | uppercase }}</div>
                  <mat-icon
                    *ngIf="!platform.columns12 && item.buttons.length"
                    >{{
                      item.hover ? 'arrow_drop_up' : 'arrow_drop_down'
                    }}</mat-icon
                  >
                </div>
              </button>
              <ng-container *ngIf="item.hover && item.buttons.length">
                <ng-container
                  *ngTemplateOutlet="
                    recursiveList;
                    context: {
                      $implicit: item.buttons,
                      parents: parents.concat(item.id)
                    }
                  "
                ></ng-container>
              </ng-container>
            </li>
          </ng-container>
        </ul>
      </ng-template>

      <ng-container
        *ngTemplateOutlet="
          recursiveList;
          context: { $implicit: menu, parents: [] }
        "
      ></ng-container>
    </div>
    <mat-divider class="row"></mat-divider>
  </div>
</nav>

<app-maintenance-message></app-maintenance-message>