ghostfolio/apps/client/src/app/components/header/header.component.html

<mat-toolbar class="px-2">
  <ng-container *ngIf="user">
    <a
      [routerLink]="['/']"
      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
      mat-button
    >
      <gf-logo></gf-logo>
    </a>
    <span class="spacer"></span>
    <a
      class="d-none d-sm-block"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'home' || currentRoute === 'zen',
        'text-decoration-underline':
          currentRoute === 'home' || currentRoute === 'zen'
      }"
      [routerLink]="['/']"
      >Overview</a
    >
    <a
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'portfolio',
        'text-decoration-underline': currentRoute === 'portfolio'
      }"
      [routerLink]="['/portfolio']"
      >Portfolio</a
    >
    <a
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'accounts',
        'text-decoration-underline': currentRoute === 'accounts'
      }"
      [routerLink]="['/accounts']"
      >Accounts</a
    >
    <a
      *ngIf="hasPermissionToAccessAdminControl"
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'admin',
        'text-decoration-underline': currentRoute === 'admin'
      }"
      [routerLink]="['/admin']"
      >Admin Control</a
    >
    <a
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'resources',
        'text-decoration-underline': currentRoute === 'resources'
      }"
      [routerLink]="['/resources']"
      >Resources</a
    >
    <a
      *ngIf="hasPermissionForSubscription"
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'pricing',
        'text-decoration-underline': currentRoute === 'pricing'
      }"
      [routerLink]="['/pricing']"
      >Pricing</a
    >
    <a
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'about',
        'text-decoration-underline': currentRoute === 'about'
      }"
      [routerLink]="['/about']"
      >About</a
    >
    <button
      class="no-min-width px-1"
      mat-flat-button
      [matMenuTriggerFor]="accountMenu"
      (menuClosed)="onMenuClosed()"
      (menuOpened)="onMenuOpened()"
    >
      <ion-icon
        class="d-none d-sm-block"
        name="person-circle-outline"
        size="large"
      ></ion-icon>
      <ion-icon
        class="d-block d-sm-none"
        size="large"
        [name]="isMenuOpen ? 'close-outline' : 'menu-outline'"
      ></ion-icon>
    </button>
    <mat-menu #accountMenu="matMenu" xPosition="before">
      <ng-container *ngIf="user?.access?.length > 0">
        <button
          class="align-items-center d-flex"
          mat-menu-item
          (click)="impersonateAccount(null)"
        >
          <ion-icon
            *ngIf="user?.access?.length > 0"
            class="mr-2"
            [name]="
              impersonationId
                ? 'radio-button-off-outline'
                : 'radio-button-on-outline'
            "
          ></ion-icon>
          <span *ngIf="user?.alias">{{ user.alias }}</span>
          <span *ngIf="!user?.alias" i18n><span></span>Me</span>
        </button>
        <button
          *ngFor="let accessItem of user?.access"
          class="align-items-center d-flex"
          disabled="false"
          mat-menu-item
          (click)="impersonateAccount(accessItem.id)"
        >
          <ion-icon
            class="mr-2"
            name="square-outline"
            [name]="
              accessItem.id === impersonationId
                ? 'radio-button-on-outline'
                : 'radio-button-off-outline'
            "
          ></ion-icon>
          <span *ngIf="accessItem.alias">{{ accessItem.alias }}</span>
          <span *ngIf="!accessItem.alias" i18n>User</span>
        </button>
        <hr class="m-0" />
      </ng-container>
      <a
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{
          'font-weight-bold': currentRoute === 'home' || currentRoute === 'zen'
        }"
        [routerLink]="['/']"
        >Overview</a
      >
      <a
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{
          'font-weight-bold': currentRoute === 'portfolio'
        }"
        [routerLink]="['/portfolio']"
        >Portfolio</a
      >
      <a
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{ 'font-weight-bold': currentRoute === 'accounts' }"
        [routerLink]="['/accounts']"
        >Accounts</a
      >
      <a
        class="align-items-center d-flex"
        i18n
        mat-menu-item
        [ngClass]="{ 'font-weight-bold': currentRoute === 'account' }"
        [routerLink]="['/account']"
        >My Ghostfolio</a
      >
      <a
        *ngIf="hasPermissionToAccessAdminControl"
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{ 'font-weight-bold': currentRoute === 'admin' }"
        [routerLink]="['/admin']"
        >Admin Control</a
      >
      <hr class="m-0" />
      <a
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{
          'font-weight-bold': currentRoute === 'resources'
        }"
        [routerLink]="['/resources']"
        >Resources</a
      >
      <a
        *ngIf="hasPermissionForSubscription"
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{ 'font-weight-bold': currentRoute === 'pricing' }"
        [routerLink]="['/pricing']"
        >Pricing</a
      >
      <a
        class="d-block d-sm-none"
        i18n
        mat-menu-item
        [ngClass]="{ 'font-weight-bold': currentRoute === 'about' }"
        [routerLink]="['/about']"
        >About Ghostfolio</a
      >
      <hr class="d-block d-sm-none m-0" />
      <button mat-menu-item (click)="onSignOut()">Logout</button>
    </mat-menu>
  </ng-container>
  <ng-container *ngIf="user === null">
    <a
      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
      mat-button
      [routerLink]="['/']"
    >
      <gf-logo [hideName]="!currentRoute || currentRoute === 'start'"></gf-logo>
    </a>
    <span class="spacer"></span>
    <a
      class="d-none d-sm-block mx-1"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'about',
        'text-decoration-underline': currentRoute === 'about'
      }"
      [routerLink]="['/about']"
      >About</a
    >
    <a
      *ngIf="hasPermissionForSubscription"
      i18n
      mat-flat-button
      [ngClass]="{
        'font-weight-bold': currentRoute === 'pricing',
        'text-decoration-underline': currentRoute === 'pricing'
      }"
      [routerLink]="['/pricing']"
      >Pricing</a
    >
    <a
      class="d-none d-sm-block mx-1 no-min-width px-1"
      href="https://github.com/ghostfolio/ghostfolio"
      mat-flat-button
      ><ion-icon name="logo-github"></ion-icon
    ></a>
    <button class="mx-1" i18n mat-flat-button (click)="openLoginDialog()">
      Sign In
    </button>
    <a
      class="d-none d-sm-block"
      color="primary"
      i18n
      mat-flat-button
      [routerLink]="['/register']"
      >Get Started
    </a>
  </ng-container>
</mat-toolbar>