<div id="user-menu-items">
    <ng-container *ngFor="let item of userMenuItems; trackBy: trackBy">
        <a (click)="item.action?.()" *ngIf="item.show" [id]="item.id" [routerLink]="item.routerLink | tenant" mat-menu-item>
            {{ item.name | translate }}
        </a>
    </ng-container>

    <a [id]="'switch-accounts'" [matMenuTriggerFor]="tenantsMenu" mat-menu-item>
        {{ 'top-bar.navigation-items.my-account.children.select-tenant' | translate }}
    </a>

    <button (click)="userService.logout()" id="logout" mat-menu-item>
        <mat-icon svgIcon="iqser:logout"></mat-icon>
        <span translate="top-bar.navigation-items.my-account.children.logout"> </span>
    </button>
</div>

<mat-menu #tenantsMenu="matMenu" xPosition="before">
    <ng-template matMenuContent>
        <app-tenants-menu></app-tenants-menu>
    </ng-template>
</mat-menu>
