<div>
  <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
    @if (user) {
      <span><fm-avatar [user]="user" size="40"></fm-avatar></span>
    }
    <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
      @if (user) {
        <div  class="card">
          <div class="card-body">
            <div class="username">{{user.name}}</div>
            @if (getProvider(); as provider) {
              <div>
                <small><span i18n>Provider</span><span> {{provider}}</span></small>
              </div>
            }
            <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
          </div>
        </div>
      }
      <router-outlet name="user-menu"></router-outlet>
    </div>
  </div>
</div>
