<mat-toolbar class="header" color="primary">
  <div style="flex: 1;">
    <a [routerLink]="['/']">
      <button class="home" mat-button>
        <img src="assets/logo.png" class="logo-img">BSide
      </button>
    </a>
    <!-- <a [routerLink]="['templates']"><button mat-button class="menu-btn"><span
          style="font-size: 1.2em; vertical-align: baseline;">Templates</span></button></a> -->
    <a [routerLink]="user ? ['repos', user?.login] : ['repos']" ><button mat-button class="menu-btn"><span
          style="font-size: 1.2em; vertical-align: baseline;">Workspace</span></button></a>
    <span class="spacer"></span>
  </div>
  <div>
    <!-- <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">favorite</mat-icon> -->
    <a routerLink="/login" [fxHide.xs]="true" [fxHide.sm]="true"><button class="signin" mat-raised-button *ngIf="!isLogin && !redirecting">
      <img style="height: 1.3em; margin-right: 0.3em" src="assets/GitHub-Mark-32px.png"/>Sign
      in</button></a>
    <mat-icon [matMenuTriggerFor]="appMenu" *ngIf="!isLogin && !redirecting" [fxShow]="false" [fxShow.xs]="true" [fxShow.sm]="true" style="vertical-align: middle;">menu</mat-icon>
    <mat-menu #appMenu="matMenu">
      <button mat-menu-item [routerLink]="['/login']">
        Sign in
      </button>
    </mat-menu>
    <!-- <button mat-icon-button [matMenuTriggerFor]="menu" *ngIf="isLogin" color="white" style="width: 32px; height: 32px;"> -->
    <img src="{{user?.avatar_url}}" [matMenuTriggerFor]="menu" *ngIf="isLogin && user" color="white"
      style="width: 32px; height: 32px; vertical-align: middle;" title="{{user?.login}}({{user?.name}})"
      id="profile-image" />
    <mat-spinner style="display: inline-block;" [diameter]="30" [strokeWidth]="3" *ngIf="isLogin && !user">
    </mat-spinner>
    <!-- </button>  -->
    <mat-menu #menu="matMenu">
      <a mat-menu-item target="_blank" href="{{user?.html_url}}"><span>{{user?.login}}</span>
      </a>
      <button mat-menu-item (click)="logout()">
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </button>
    </mat-menu>
  </div>
</mat-toolbar>