src/app/app.component.ts
| selector | app-root |
| styleUrls | ./app.component.scss |
| templateUrl | ./app.component.html |
Properties |
Methods |
constructor(sidebarService: NbSidebarService)
|
||||||
|
Defined in src/app/app.component.ts:14
|
||||||
|
Parameters :
|
| toggleSidebar |
toggleSidebar()
|
|
Defined in src/app/app.component.ts:18
|
|
Returns :
void
|
| audits$ |
Type : Observable<Audit[]>
|
Decorators :
@Select(AuditState.audits)
|
|
Defined in src/app/app.component.ts:14
|
import { Component } from '@angular/core';
import { NbSidebarService } from '@nebular/theme';
import { Select } from '@ngxs/store';
import { AuditState } from './core/ngxs/audit.state';
import { Observable } from 'rxjs';
import { Audit } from './core/data/models/audit.model';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@Select(AuditState.audits) audits$: Observable<Audit[]>;
constructor(private sidebarService: NbSidebarService) {}
toggleSidebar() {
this.sidebarService.toggle();
}
}
<nb-layout>
<nb-layout-header fixed>
<nb-actions size="small">
<nb-action (click)="toggleSidebar()" icon="menu-2-outline" data-cy="toggle-sidebar">Hello</nb-action>
<nb-action badgeStatus="primary" [badgeText]="(audits$ | async) ? (audits$ | async).length : '0'" routerLink="/audits" icon="home-outline" data-cy="home"></nb-action>
<nb-action routerLink="/contact-persons" icon="people-outline" data-cy="contacts"></nb-action>
</nb-actions>
</nb-layout-header>
<nb-sidebar collapsedBreakpoints="lg, md, sm, is, xs" responsive data-cy="sidebar">
<div class="sidebar-container">
<div class="sidebar-container-content" data-cy="sidebar-content">
<app-sidebar></app-sidebar>
</div>
</div>
</nb-sidebar>
<nb-layout-column>
<router-outlet></router-outlet>
</nb-layout-column>
</nb-layout>
<ng-container appActionListener></ng-container>
./app.component.scss
.sidebar-container {
height: 80%;
display: grid;
grid-template-rows: 1fr auto;
& .sidebar-container-version {
text-align: center;
}
}