@pega/dx-component-builder-sdk/tests/assets/sdk-a/components/createAll/override-sdk/template/wss-nav-bar/wss-nav-bar.component.html

Utility for building custom UI components

<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
  <mat-toolbar-row mat-icon-button>
    <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
      <div>
        <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
      </div>
      <div class="psdk-nav-portal-info">
        <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
      </div>
    </div>

    <div *ngFor="let page of navPages$">
      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
        <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
      </div>
    </div>

    <span class="spacer"></span>

    <mat-list>
      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
        <div class="flex-box">
          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
        </div>
      </mat-list-item>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>Profile</button>
        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
      </mat-menu>
    </mat-list>
  </mat-toolbar-row>
</mat-toolbar>