ohayolibs/src/app/layout/header/header.component.html

Ohayo is a set of essential modules for ohayojp.

<ng-template #menu>
  <ul nz-menu [nzMode]="isMobile ? 'inline' : 'horizontal'" class="menu-site" id="nav">
    <li nz-menu-item routerLink="/docs/getting-started/{{ i18n.zone }}" [matchRouter]="regexs.docs">
      {{ 'app.header.menu.docs' | translate }}
    </li>
    <li nz-menu-item routerLink="/components/sv/{{ i18n.zone }}" [matchRouter]="regexs.components">
      {{ 'app.header.menu.components' | translate }}
    </li>
    <li nz-menu-item routerLink="/cli/getting-started/{{ i18n.zone }}" [matchRouter]="regexs.cli">
      {{ 'app.header.menu.cli' | translate }}
    </li>
    <li *ngIf="isMobile" nz-menu-group [nzTitle]="'app.header.menu.ohayo' | translate">
      <ul>
        <li *ngFor="let i of ohayo" nz-menu-item routerLink="/{{ i }}/getting-started/{{ i18n.zone }}">
          {{ 'app.header.menu.' + i | translate }}
        </li>
      </ul>
    </li>
    <li *ngIf="!isMobile" nz-menu-item [matchRouter]="regexs.ohayo">
      <div nz-dropdown nzPlacement="bottomRight" [nzDropdownMenu]="ohayoMenu">
        {{ 'app.header.menu.ohayo' | translate }}
        <i nz-icon nzType="down"></i>
      </div>
      <nz-dropdown-menu #ohayoMenu="nzDropdownMenu">
        <ul nz-menu>
          <li *ngFor="let i of ohayo" nz-menu-item routerLink="/{{ i }}/getting-started/{{ i18n.zone }}">
            {{ 'app.header.menu.' + i | translate }}
          </li>
        </ul>
      </nz-dropdown-menu>
    </li>
    <li nz-menu-item>
      <a href="https://e.ohayojp.com/" target="_blank">
        {{ 'app.header.menu.themes' | translate }}
      </a>
    </li>
    <li *ngIf="showGitee" nz-menu-item>
      <a href="https://ohayojp.gitee.io/ohayo/" target="_blank">
        国内镜像
      </a>
    </li>
    <ng-container *ngIf="isMobile">
      <a nz-menu-item href="https://github.com/ohayojp/ohayojp" target="_blank">Github</a>
      <li nz-menu-item (click)="langChange(i18n.zone === 'zh' ? 'en' : 'zh')">
        {{ 'app.header.lang' | translate }}
      </li>
    </ng-container>
  </ul>
</ng-template>
<i *ngIf="isMobile" nz-icon nzType="menu" nz-popover nzTooltipOverlayClassName="popover-menu"
  nzPopoverPlacement="bottomRight" [nzPopoverContent]="menu" nzPopoverTrigger="click" [(nzVisible)]="menuVisible"
  [nzPopoverTitle]="null" class="nav-phone-icon"></i>
<div nz-row style="flex-flow: nowrap; height: 64px;">
  <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24" nzXl="5" nzXXl="4">
    <h1>
      <a routerLink="/{{ i18n.zone }}" nz-tooltip nzTooltipTitle="{{ 'app.footer.qqgroup' | translate }}: 316911865"
        (click)="onCopy('316911865')" id="logo">
        <img src="./assets/img/logo-color.svg" style="max-height: 32px;" />
        ohayojp
      </a>
    </h1>
  </div>
  <div nz-col nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="0" nzXl="19" nzXXl="20" class="menu-row">
    <header-search></header-search>
    <ng-container *ngIf="!isMobile">
      <ng-template [ngTemplateOutlet]="menu"></ng-template>
      <nz-select nzSize="small" class="version" [ngModel]="currentVersion" (ngModelChange)="toVersion($event)">
        <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version" [nzValue]="version"></nz-option>
        <nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion"></nz-option>
      </nz-select>
      <button nz-button nzGhost nzSize="small" (click)="langChange(i18n.zone === 'zh' ? 'en' : 'zh')"
        class="header-button header-lang-button">
        {{ 'app.header.lang' | translate }}
      </button>
      <github-button type="stargazers" size="small" namespace="ohayojp" repo="ohayojp"></github-button>
    </ng-container>
  </div>
</div>