1 import { Component, OnDestroy } from '@angular/core';
4 NbMediaBreakpointsService,
9 } from '@nebular/theme';
11 import { StateService } from '../../../@core/data/state.service';
13 import { Subscription } from 'rxjs/Subscription';
14 import 'rxjs/add/operator/withLatestFrom';
15 import 'rxjs/add/operator/delay';
17 // TODO: move layouts into the framework
19 selector: 'ngx-sample-layout',
20 styleUrls: ['./sample.layout.scss'],
22 <nb-layout [center]="layout.id === 'center-column'" windowMode>
23 <nb-layout-header fixed>
24 <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
27 <nb-sidebar class="menu-sidebar"
30 [right]="sidebar.id === 'right'">
32 <a href="#" class="btn btn-hero-success main-btn">
33 <i class="ion ion-social-github"></i> <span>Support Us</span>
36 <ng-content select="nb-menu"></ng-content>
39 <nb-layout-column class="main-content">
40 <ng-content select="router-outlet"></ng-content>
43 <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
44 <nb-menu [items]="subMenu"></nb-menu>
47 <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
48 <nb-menu [items]="subMenu"></nb-menu>
51 <nb-layout-footer fixed>
52 <ngx-footer></ngx-footer>
55 <nb-sidebar class="settings-sidebar"
56 tag="settings-sidebar"
59 [right]="sidebar.id !== 'right'">
60 <ngx-theme-settings></ngx-theme-settings>
65 export class SampleLayoutComponent implements OnDestroy {
67 subMenu: NbMenuItem[] = [
69 title: 'PAGE LEVEL MENU',
74 icon: 'ion ion-android-radio-button-off',
75 link: '/pages/ui-features/buttons',
79 icon: 'ion ion-android-radio-button-off',
80 link: '/pages/ui-features/grid',
84 icon: 'ion ion-android-radio-button-off',
85 link: '/pages/ui-features/icons',
89 icon: 'ion ion-android-radio-button-off',
90 link: '/pages/ui-features/modals',
94 icon: 'ion ion-android-radio-button-off',
95 link: '/pages/ui-features/typography',
98 title: 'Animated Searches',
99 icon: 'ion ion-android-radio-button-off',
100 link: '/pages/ui-features/search-fields',
104 icon: 'ion ion-android-radio-button-off',
105 link: '/pages/ui-features/tabs',
111 protected layoutState$: Subscription;
112 protected sidebarState$: Subscription;
113 protected menuClick$: Subscription;
115 constructor(protected stateService: StateService,
116 protected menuService: NbMenuService,
117 protected themeService: NbThemeService,
118 protected bpService: NbMediaBreakpointsService,
119 protected sidebarService: NbSidebarService) {
120 this.layoutState$ = this.stateService.onLayoutState()
121 .subscribe((layout: string) => this.layout = layout);
123 this.sidebarState$ = this.stateService.onSidebarState()
124 .subscribe((sidebar: string) => {
125 this.sidebar = sidebar;
128 const isBp = this.bpService.getByName('is');
129 this.menuClick$ = this.menuService.onItemSelect()
130 .withLatestFrom(this.themeService.onMediaQueryChange())
132 .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
134 if (bpTo.width <= isBp.width) {
135 this.sidebarService.collapse('menu-sidebar');
141 this.layoutState$.unsubscribe();
142 this.sidebarState$.unsubscribe();
143 this.menuClick$.unsubscribe();