<ng-container *ngIf="items$ | async as items">
  <div
    class="p-t-8 p-b-8"
    *ngIf="items.length"
  >
    <ul class="list-unstyled m-b-0">
      <ng-container *ngFor="let item of items">
        <ng-container *ngIf="item.template">
          <ng-container *c8yOutlet="item.template"></ng-container>
        </ng-container>
        <ng-container *ngIf="!item.template">
          <li>
            <button
              class="c8y-right-drawer__link"
              [attr.aria-label]="item.label | translate"
              [attr.tabindex]="(open$ | async) ? '0' : '-1'"
              type="button"
              (click)="item.click()"
              [attr.href]="item.link"
              [attr.target]="item.target"
            >
              {{ item.label | translate }}
            </button>
          </li>
        </ng-container>
      </ng-container>
    </ul>
  </div>
</ng-container>

<!-- the default items -->
<c8y-user-menu-item
  [icon]="'user-menu-male'"
  *ngIf="(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'"
  [label]="'User settings' | translate"
  [priority]="20"
  [dataCy]="'user-menu-user-settings-button'"
  (click)="editUser()"
></c8y-user-menu-item>
<c8y-user-menu-item
  [icon]="'sign-out'"
  *ngIf="(ui.currentUser | async) && (ui.currentUser | async).id !== 'NO_LOGIN'"
  [label]="'Logout' | translate"
  [dataCy]="'user-menu-logout-button'"
  (click)="logout()"
></c8y-user-menu-item>