Takumon/mean-blog

<mat-toolbar class="toolbar" color="primary">
  <img
    class="toolbar__app-logo"
    [routerLink]="auth.loginUser ? '': '/dashbord/articles'"
    routerLinkActive="active"
    src="assets/images/app-logo.png"
    >

  <nav *ngIf="isActiveNavbar" mat-tab-nav-bar class="toolbar__tab navbar ink-bar-white">
    <a mat-tab-link
      *ngIf="auth.loginUser"
      class="navbar__link"
      routerLink="/dashbord"
      routerLinkActive #rla1="routerLinkActive"
      [active]="rla1.isActive"
      [routerLinkActiveOptions]="{exact: true}"
      >
      <i class="fa fa-fw fa-star"></i>  <span>お気に入り</span>
    </a>
    <a mat-tab-link
      class="navbar__link"
      routerLink="/dashbord/articles"
      routerLinkActive #rla2="routerLinkActive"
      [active]="rla2.isActive"
      [routerLinkActiveOptions]="{exact: true}"
      >
      <i class="fa fa-fw fa-list"></i>  <span>記事一覧</span>
    </a>
  </nav>

  <h1 *ngIf="!isActiveNavbar" class="toolbar__title">{{routerName$ | async}}</h1>
  <span class="toolbar__spacer"></span>

  <ng-container *ngIf="auth.isFinishedCheckState">
    <button
      *ngIf="auth.loginUser && isNotEditor()"
      mat-icon-button
      matTooltip="記事を投稿する"
      routerLink="/drafts/new">
        <i class="fa fa-fw fa-pencil fa-2x"></i>
    </button>

    <ng-container *ngIf="!auth.isLogin() && !isLoginPage()">
      <button
        mat-button
        class="toolbar__btn_color_white"
        (click)="registerUser()"
        >
      <i class="fa fa-fw fa-user-plus"></i>  ユーザ登録
      </button>

      <button
        mat-button
        class="toolbar__btn_color_white"
        color="normal"
        (click)="login()"
        >
      <i class="fa fa-fw fa-sign-in"></i>  ログイン
      </button>
    </ng-container>

    <div
      *ngIf="auth.loginUser"
      class="menu-btn"
      [matMenuTriggerFor]="menu">
      <img
        *ngIf="auth.loginUser"
        class="menu-btn__icon"
        lazyLoad="/api/images/avator/{{ auth.loginUser._id }}"
        [offset]="this.Constant.LAZY_LOAD_OFFSET"
        >

      <mat-menu #menu="matMenu" class="menu-btn__menu">
        <div mat-menu-item disabled class="menu-btn__menu__description"><span class="menu-btn__menu__username">{{auth.loginUser.userId}}</span>としてログイン済</div>
        <button
          *ngIf="!auth.isAdmin()"
          mat-menu-item
          [routerLink]="['/users', auth.loginUser.userId, 'articles']"
          routerLinkActive="active">
          <i class="fa fa-fw fa-list"></i><span> 投稿一覧</span>
        </button>

        <button
          *ngIf="!auth.isAdmin()"
          mat-menu-item
          [routerLink]="['drafts']"
          routerLinkActive="active">
          <i class="fa fa-fw fa-files-o"></i><span> 下書き一覧</span>
        </button>

        <button
          *ngIf="auth.isAdmin()"
          mat-menu-item
          [routerLink]="['/users']"
          routerLinkActive="active">
          <i class="fa fa-fw fa-user-circle-o"></i><span> ユーザ一覧</span>
        </button>

        <button
          mat-menu-item
          routerLink="login/loginoptions/passwordchange"
          routerLinkActive="active">
          <i class="fa fa-fw fa-lock"></i><span> パスワード変更</span>
        </button>

        <button
          mat-menu-item
          routerLink="/login"
          routerLinkActive="active">
          <i class="fa fa-fw fa-sign-out"></i><span> ログアウト</span>
        </button>
      </mat-menu>
    </div>
  </ng-container>

</mat-toolbar>

<div class="content">
  <ng-container *ngIf="isLoginPage() || auth.isFinishedCheckState">
    <router-outlet></router-outlet>
  </ng-container>
  <ng-container *ngIf="!isLoginPage() && !auth.isFinishedCheckState">
    <mat-progress-bar class="content__progressbar" mode="indeterminate"></mat-progress-bar>
  </ng-container>
</div>