<header fxLayout="row wrap" fxLayoutAlign="space-between center">
  <main fxLayout="row wrap" fxLayoutAlign="start center">
    <img src="assets/images/logo.svg" alt="" title="" />

    <ul fxLayout="row wrap" fxLayoutAlign="center center" fxHide.lt-md="">
      <li>Platform</li>
      <li>Why</li>
      <li>Pricing</li>
    </ul>
  </main>

  <div
    class="actions"
    fxLayout="row"
    fxLayoutAlign="end center"
    *ngIf="!(user$ | async)"
  >
    <button class="actions__signin ptr" (click)="onSignIn()">Sign in</button>
    <button class="actions__sign-up ptr" (click)="onSignUp()">Sign Up</button>
  </div>
  <p style="color: #fff" *ngIf="user$ | async">
    {{ (user$ | async)?.userName }}
  </p>
</header>
