Main header bar

Common top bar for all applications in Cumulocity's platform.

Holds the navigator toggle button, page title, breadcrumbs, user account, app switcher, and right drawer toggle button. Other components such as search or the plus button are application specific.

Components used: c8y-app-icon, c8y-title-outlet, c8y-breadcrumb-outlet, c8y-search-outlet , c8y-action-outlet, c8y-app-switcher, c8y-user-menu.

<div class="app-main-header" [ngClass]="{
  open: (nav$ | async).open,
  'nav-hidden-on-startup': (nav$ | async).hiddenOnStartup
}">
  <div class="header-bar">
    <button
      *ngIf="(nav$ | async).canToggle"
      type="button"
      class="navigator-toggle main-header-button"
      title="Toggle navigator"
      (click)="headerService.toggleNavigator()"
    >
      <i [c8yIcon]="'angle-double-right'"></i>
    </button>
    <div class="app-view">
      <c8y-app-icon [name]="app.defaultIcon" class="c8y-app-icon"></c8y-app-icon>
      <div class="spinner" *ngIf="app.isLoading | async">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
      <span class="page-header" *ngIf="!(app.isLoading | async)">
        <c8y-title-outlet></c8y-title-outlet>
        <c8y-breadcrumb-outlet [breadcrumbs]="breadcrumbService.breadcrumbs$ | async" class="app-breadcrumbs"></c8y-breadcrumb-outlet>
      </span>
    </div>
    <c8y-search-outlet [search]="searchService.search$ | async" class="main-header-item"></c8y-search-outlet>
    <c8y-action-outlet [items]="actionService.actions$ | async" class="main-header-item"></c8y-action-outlet>
    <c8y-app-switcher  class="main-header-item"></c8y-app-switcher>
    <c8y-user-menu  class="main-header-item"></c8y-user-menu>
    <button class="drawer-toggle main-header-button">
      <i [c8yIcon]="'angle-double-left'"></i>
    </button>
  </div>
</div>