browser/apps/desktop/src/app/layout/account-switcher.component.html

<button
  class="account-switcher"
  (click)="toggle()"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
  [hidden]="!showSwitcher"
  aria-haspopup="menu"
  aria-controls="cdk-overlay-container"
  [attr.aria-expanded]="isOpen"
>
  <ng-container *ngIf="activeAccount?.email != null; else noActiveAccount">
    <app-avatar
      [text]="activeAccount.name"
      [id]="activeAccount.id"
      size="25"
      [circle]="true"
      [fontSize]="14"
      [dynamic]="true"
      *ngIf="activeAccount.email != null"
      aria-hidden="true"
    ></app-avatar>
    <span>{{ activeAccount.email }}</span>
  </ng-container>
  <ng-template #noActiveAccount>
    <span>{{ "switchAccount" | i18n }}</span>
  </ng-template>
  <i
    class="bwi"
    aria-hidden="true"
    [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-chevron-up': isOpen }"
  ></i>
</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
  (backdropClick)="close()"
  (detach)="close()"
  [cdkConnectedOverlayOpen]="showSwitcher && isOpen"
  [cdkConnectedOverlayPositions]="overlayPostition"
  cdkConnectedOverlayMinWidth="250px"
>
  <div
    class="account-switcher-dropdown"
    [@transformPanel]="'open'"
    cdkTrapFocus
    cdkTrapFocusAutoCapture
    role="dialog"
    aria-modal="true"
  >
    <div class="accounts" *ngIf="numberOfAccounts > 0">
      <button
        *ngFor="let a of accounts | keyvalue"
        class="account"
        (click)="switch(a.key)"
        appA11yTitle="{{ 'loggedInAsOn' | i18n: a.value.profile.email:a.value.serverUrl }}"
        attr.aria-label="{{ 'switchAccount' | i18n }}"
      >
        <app-avatar
          [text]="a.value.profile.name ?? a.value.profile.email"
          [id]="a.value.profile.userId"
          size="25"
          [circle]="true"
          [fontSize]="14"
          [dynamic]="true"
          *ngIf="a.value.profile.email != null"
          aria-hidden="true"
        ></app-avatar>
        <div class="accountInfo">
          <span class="email" aria-hidden="true">{{ a.value.profile.email }}</span>
          <span class="server" aria-hidden="true" *ngIf="a.value.serverUrl != 'bitwarden.com'">{{
            a.value.serverUrl
          }}</span>
          <span class="status" aria-hidden="true">{{
            (a.value.profile.authenticationStatus === authStatus.Unlocked ? "unlocked" : "locked")
              | i18n
          }}</span>
        </div>
        <i
          class="bwi bwi-2x text-muted"
          [ngClass]="
            a.value.profile.authenticationStatus == authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
          "
          aria-hidden="true"
        ></i>
      </button>
    </div>
    <ng-container *ngIf="activeAccount?.email != null">
      <div class="border" *ngIf="numberOfAccounts > 0"></div>
      <ng-container *ngIf="numberOfAccounts < 4">
        <button type="button" class="add" (click)="addAccount()">
          <i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
        </button>
      </ng-container>
      <ng-container *ngIf="numberOfAccounts == 4">
        <span class="accountLimitReached">{{ "accountSwitcherLimitReached" | i18n }} </span>
      </ng-container>
    </ng-container>
  </div>
</ng-template>