FarmMapsLib/projects/common/src/fm/components/user-menu/user-menu.component.html

<div>
    <div (click)="toggle($event)" class="rounded-circle menu-button hidden" [ngClass]="{'hidden':!user}">
        <span *ngIf="user"><fm-avatar [user]="user" size="40"></fm-avatar></span>
        <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">           
                <div  class="card" *ngIf="user">           
                    <div class="card-body">
                        <div class="username">{{user.name}}</div>
                        <div *ngIf="getProvider(); let provider">
                            <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>