abstruse/src/app/components/app-header/app-header.component.html

Abstruse CI

<header class="header">
  <div class="container">
    <div class="header-left">
      <a class="header-item" routerLink="/">
        <img src="/assets/images/abstruse-text-white.svg" class="abstruse-logo" alt="Abstruse CI">
      </a>
      <a class="header-item is-hidden-mobile" routerLink="/" routerLinkActive="is-active">
        <span>Builds</span>
      </a>
      <a class="header-item is-hidden-mobile" routerLink="/dashboard" routerLinkActive="is-active" name="dashboard" *ngIf="user || demo">
        <span>Dashboard</span>
      </a>
      <a class="header-item nav-team is-hidden-mobile" routerLink="/team" routerLinkActive="is-active" *ngIf="user">
        <span>Team</span>
      </a>
      <a class="header-item is-hidden-mobile" routerLink="/repositories" routerLinkActive="is-active">
        <span>Repositories</span>
      </a>
      <a class="header-item is-hidden-mobile" routerLink="/images" routerLinkActive="is-active" *ngIf="user">
        <span>Images</span>
      </a>
    </div>
    <div class="header-right">
      <div class="header-item" *ngIf="user">
        <span class="header-user-span user-item" (click)="menuDropped = !menuDropped">
          <img [src]="user.avatar" class="avatar-img">
          <i class="ionicon ion-chevron-down"></i>
        </span>
        <div class="header-dropdown-menu" *ngIf="menuDropped">
          <div class="header-dropdown-heading">
            <a class="version-link" href="https://github.com/bleenco/abstruse" target="_blank">
              Abstruse {{ version }}
            </a>
          </div>
          <a class="header-dropdown-link" [routerLink]="['/user', user?.id]">
            Settings
          </a>
          <a class="header-dropdown-link" routerLink="/logs">
            System Logs
          </a>
          <a class="header-dropdown-link nav-dropdown-item" (click)="logout()">
            Logout
          </a>
        </div>
      </div>
      <div class="header-item" *ngIf="!user" routerLink="/login">
        Login
      </div>
    </div>
  </div>
</header>

<div class="mobile-switch-view is-hidden-tablet is-mobile is-mobile-only">
  <button type="button" (click)="switchToDesktopView()" *ngIf="view === 'mobile'">
    Switch to Desktop View
    <i class="ionicon ion-monitor"></i>
  </button>
  <button type="button" (click)="switchToMobileView()" *ngIf="view === 'desktop'">Switch to Mobile View</button>
</div>

<div class="mobile-nav is-hidden-tablet is-mobile is-mobile-only">
  <a routerLink="/">
    <img class="mobile-nav-logo" src="/assets/images/abstruse-text-logo.svg">
  </a>
  <a routerLink="/login" *ngIf="!user">
    <i class="ionicon ion-log-in"></i>
  </a>
  <i class="ionicon ion-log-out" (click)="logout()" *ngIf="user"></i>
</div>