core/header/header-bar/header-bar.component.ts
selector | c8y-header-bar |
templateUrl | ./header-bar.component.html |
Properties |
|
Methods |
Inputs |
constructor(headerService: HeaderService, actionService: ActionService, breadcrumbService: BreadcrumbService, searchService: SearchService, appState: AppStateService, userMenuService: UserMenuService, docs: DocsService)
|
||||||||||||||||||||||||
Parameters :
|
simple |
Type : boolean
|
Default value : false
|
Can be set to show an header bar with only title, app-switcher and user-menu |
ngAfterViewInit |
ngAfterViewInit()
|
Returns :
void
|
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>