File

core/header/header-bar/header-bar.component.ts

Implements

AfterViewInit

Metadata

Index

Properties
Methods
Inputs

Constructor

constructor(headerService: HeaderService, actionService: ActionService, breadcrumbService: BreadcrumbService, searchService: SearchService, appState: AppStateService, userMenuService: UserMenuService, docs: DocsService)
Parameters :
Name Type Optional
headerService HeaderService No
actionService ActionService No
breadcrumbService BreadcrumbService No
searchService SearchService No
appState AppStateService No
userMenuService UserMenuService No
docs DocsService No

Inputs

simple
Type : boolean
Default value : false

Can be set to show an header bar with only title, app-switcher and user-menu

Methods

ngAfterViewInit
ngAfterViewInit()
Returns : void

Properties

Public actionService
Type : ActionService
Public appState
Type : AppStateService
appState$
Type : Observable<any>
Default value : this.appState.state$
Public breadcrumbService
Type : BreadcrumbService
canToggle$
Type : Observable<boolean>
Default value : this.headerService.hasItemsInNavigator$
Public docs
Type : DocsService
drawerOpen
Default value : false
headerOpen
Default value : false
Public headerService
Type : HeaderService
Public searchService
Type : SearchService
Public userMenuService
Type : UserMenuService
<div
  class="app-main-header"
  [ngClass]="{
    open: (headerService.navigatorOpen$ | async) && !simple,
    drawerOpen: drawerOpen
  }"
>
  <div class="header-bar">
    <button
      *ngIf="(canToggle$ | async) && !simple"
      type="button"
      class="navigator-toggle main-header-button"
      title="{{ 'Toggle navigator' | translate }}"
      (click)="headerService.toggleNavigator()"
    >
      <i [c8yIcon]="'outdent'" *ngIf="!(headerService.navigatorOpen$ | async)"></i>
      <i [c8yIcon]="'dedent-right'" *ngIf="headerService.navigatorOpen$ | async"></i>
    </button>
    <div class="app-view">
      <c8y-app-icon
        [name]="(appState$ | async).app.name"
        [contextPath]="(appState$ | async).app.contextPath"
      ></c8y-app-icon>

      <span class="page-header">
        <c8y-title-outlet></c8y-title-outlet>
        <c8y-breadcrumb-outlet
          *ngIf="!simple"
          [breadcrumbs]="breadcrumbService.items$ | async"
          class="app-breadcrumbs"
        ></c8y-breadcrumb-outlet>
      </span>
    </div>
    <c8y-search-outlet
      *ngIf="!simple"
      title="{{ 'Search' | translate }}"
      [search]="searchService.items$ | async"
      class="main-header-item"
    ></c8y-search-outlet>
    <c8y-action-outlet
      *ngIf="!simple"
      [items]="actionService.items$ | async"
    ></c8y-action-outlet>
    <c8y-app-switcher
      *ngIf="appState.currentUser.value"
      title="{{ 'Application switcher' | translate }}"
      class="main-header-item"
    ></c8y-app-switcher>
    <c8y-user-menu-outlet
      [items]="(userMenuService.state$ | async).userMenuItems"
      class="main-header-item"
    ></c8y-user-menu-outlet>

    <button
      title="{{ 'Toggle side drawer' | translate }}"
      class="drawer-toggle main-header-button"
      *ngIf="(appState$ | async).showRightDrawer && !simple"
      (click)="drawerOpen = !drawerOpen"
    >
      <i [c8yIcon]="'indent'" *ngIf="drawerOpen"></i>
      <i [c8yIcon]="'dedent'" *ngIf="!drawerOpen"></i>
    </button>
  </div>
  <div class="head-toggler">
    <button title="{{ 'Toggle' | translate }}" type="button" (click)="headerService.toggle()">
      <i [c8yIcon]="'angle-right'"></i>
    </button>
  </div>
  <c8y-right-drawer
    *ngIf="(appState$ | async).showRightDrawer"
    [app]="(appState$ | async).app"
    [quickLinks]="docs.items$ | async"
    [helpAndSupport]="docs.items$ | async"
  >
  </c8y-right-drawer>
  <div class="loading-bar" [ngClass]="{ active: (appState$ | async).isLoading }"></div>
</div>

results matching ""

    No results matching ""