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

企业级中后台前端解决方案

<div class="header-wrapper">
  <div class="bg-placeholder"></div>
  <div class="header-content">
    <ng-container *ngIf="isMobile">
      <a routerLink="/{{ i18n.zone }}"><i class="app-logo"></i></a>
      <i nz-icon nzType="menu" class="header-menu-icon" nz-popover
        [(nzPopoverVisible)]="menuVisible" [nzPopoverTitle]="null" nzPopoverTrigger="click"
        nzPopoverPlacement="bottomRight" [nzPopoverContent]="mobileMenu"></i>
      <ng-template #mobileMenu>
        <div class="header-menu">
          <div class="d-flex justify-content-between align-items-center">
            <nz-select nzSize="small" [ngModel]="currentVersion" (ngModelChange)="toVersion($event)"
              class="flex-1 version">
              <nz-option *ngFor="let version of oldVersionList" [nzLabel]="version"
                [nzValue]="version">
              </nz-option>
            </nz-select>
            <nz-select nzSize="small" class="version" [ngModel]="currentLang"
              (ngModelChange)="toLang($event)">
              <nz-option *ngFor="let item of langList" [nzLabel]="item.title"
                [nzValue]="item.value">
              </nz-option>
            </nz-select>
          </div>
          <ul nz-menu nzMode="inline" class="text-center menu-site">
            <li nz-menu-item routerLink="/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.home' | translate }}
            </li>
            <li nz-menu-item (click)="toViaMobile('/docs/getting-started')">
              {{ 'app.header.menu.docs' | translate }}
            </li>
            <li nz-menu-item (click)="toViaMobile('/core/color')">
              {{ 'app.header.menu.components' | translate }}
            </li>
            <li nz-submenu>
              <span title>{{ 'app.header.menu.bixi' | translate }}</span>
              <ul>
                <li *ngFor="let s of solutions" nz-menu-item (click)="toViaMobile(s.link)">
                  {{ 'app.header.menu.' + s.name | translate }}
                </li>
              </ul>
            </li>
            <li nz-menu-item routerLink="/resources/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.resources' | translate }}
            </li>
            <!-- <li nz-menu-item>
            {{ 'app.header.menu.blog' | translate }}
            </li> -->
          </ul>
        </div>
      </ng-template>
    </ng-container>
    <div *ngIf="!isMobile">
      <a routerLink="/{{ i18n.zone }}"><i class="app-logo"></i></a>
      <div class="header-menu-container">
        <div id="search-box"></div>
        <div *ngIf="!isMobile" class="header-menu">
          <ul nz-menu nzMode="horizontal" class="menu-site" id="nav">
            <li nz-menu-item routerLink="/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.home' | translate }}
            </li>
            <li nz-menu-item routerLink="/docs/getting-started/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.docs' | translate }}
            </li>
            <li nz-menu-item routerLink="/core/color/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.components' | translate }}
            </li>
            <li nz-menu-item class="menu-site__more">
              <div nz-dropdown nzPlacement="bottomLeft" [nzDropdownMenu]="bixiMenu">
                {{ 'app.header.menu.bixi' | translate }}
              </div>
              <nz-dropdown-menu #bixiMenu="nzDropdownMenu">
                <ul nz-menu>
                  <li *ngFor="let s of solutions" nz-menu-item
                    routerLink="/{{s.link}}/{{ i18n.zone }}">
                    {{ 'app.header.menu.' + s.name | translate }}
                  </li>
                </ul>
              </nz-dropdown-menu>
            </li>
            <li nz-menu-item routerLink="/resources/{{ i18n.zone }}"
              routerLinkActive='ant-menu-item-selected'>
              {{ 'app.header.menu.resources' | translate }}
            </li>
            <!-- <li nz-menu-item>
            {{ 'app.header.menu.blog' | translate }}
            </li> -->
          </ul>
          <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-select>
          <nz-select nzSize="small" class="version" [ngModel]="currentLang"
            (ngModelChange)="toLang($event)">
            <nz-option *ngFor="let item of langList" [nzLabel]="item.title" [nzValue]="item.value">
            </nz-option>
          </nz-select>
        </div>
      </div>
    </div>
  </div>
</div>