<div class="c8y-right-drawer__header separator-bottom">
  <button type="button" class="close" [attr.tabindex]="(headerService.rightDrawerOpen$ | async) ? '0' : '-1'" title="{{ 'Close' | translate }}" (click)="close()">
    &times;
  </button>
  <div class="d-flex a-i-center">
    <div class="user-dot">{{ appState.currentUser | async | userNameInitials }}</div>
    <div class="min-width-0">
      <p
        *ngIf="appState.currentUser | async as currentUser"
        class="text-truncate text-medium text-16"
        title="{{ currentUser | shortenUserName }}"
      >
        {{ currentUser | shortenUserName }}
      </p>
      <small
        *ngIf="appState.currentUser | async | userRolesList as userRoles"
        [title]="userRoles"
        class="text-truncate"
      >
        {{ userRoles }}
      </small>
    </div>
  </div>
</div>