diff options
Diffstat (limited to 'webapp/src/app/@theme/layouts/sample/sample.layout.ts')
-rw-r--r-- | webapp/src/app/@theme/layouts/sample/sample.layout.ts | 145 |
1 files changed, 145 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/layouts/sample/sample.layout.ts b/webapp/src/app/@theme/layouts/sample/sample.layout.ts new file mode 100644 index 0000000..6d35c09 --- /dev/null +++ b/webapp/src/app/@theme/layouts/sample/sample.layout.ts @@ -0,0 +1,145 @@ +import { Component, OnDestroy } from '@angular/core'; +import { + NbMediaBreakpoint, + NbMediaBreakpointsService, + NbMenuItem, + NbMenuService, + NbSidebarService, + NbThemeService, +} from '@nebular/theme'; + +import { StateService } from '../../../@core/data/state.service'; + +import { Subscription } from 'rxjs/Subscription'; +import 'rxjs/add/operator/withLatestFrom'; +import 'rxjs/add/operator/delay'; + +// TODO: move layouts into the framework +@Component({ + selector: 'ngx-sample-layout', + styleUrls: ['./sample.layout.scss'], + template: ` + <nb-layout [center]="layout.id === 'center-column'" windowMode> + <nb-layout-header fixed> + <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header> + </nb-layout-header> + + <nb-sidebar class="menu-sidebar" + tag="menu-sidebar" + responsive + [right]="sidebar.id === 'right'"> + <nb-sidebar-header> + <a href="#" class="btn btn-hero-success main-btn"> + <i class="ion ion-social-github"></i> <span>Support Us</span> + </a> + </nb-sidebar-header> + <ng-content select="nb-menu"></ng-content> + </nb-sidebar> + + <nb-layout-column class="main-content"> + <ng-content select="router-outlet"></ng-content> + </nb-layout-column> + + <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'"> + <nb-menu [items]="subMenu"></nb-menu> + </nb-layout-column> + + <nb-layout-footer fixed> + <ngx-footer></ngx-footer> + </nb-layout-footer> + + <nb-sidebar class="settings-sidebar" + tag="settings-sidebar" + state="collapsed" + fixed + [right]="sidebar.id !== 'right'"> + <ngx-theme-settings></ngx-theme-settings> + </nb-sidebar> + </nb-layout> + `, +}) +export class SampleLayoutComponent implements OnDestroy { + + subMenu: NbMenuItem[] = [ + { + title: 'PAGE LEVEL MENU', + group: true, + }, + { + title: 'Buttons', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/buttons', + }, + { + title: 'Grid', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/grid', + }, + { + title: 'Icons', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/icons', + }, + { + title: 'Modals', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/modals', + }, + { + title: 'Typography', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/typography', + }, + { + title: 'Animated Searches', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/search-fields', + }, + { + title: 'Tabs', + icon: 'ion ion-android-radio-button-off', + link: '/pages/ui-features/tabs', + }, + ]; + layout: any = {}; + sidebar: any = {}; + + protected layoutState$: Subscription; + protected sidebarState$: Subscription; + protected menuClick$: Subscription; + + constructor(protected stateService: StateService, + protected menuService: NbMenuService, + protected themeService: NbThemeService, + protected bpService: NbMediaBreakpointsService, + protected sidebarService: NbSidebarService) { + this.layoutState$ = this.stateService.onLayoutState() + .subscribe((layout: string) => this.layout = layout); + + this.sidebarState$ = this.stateService.onSidebarState() + .subscribe((sidebar: string) => { + this.sidebar = sidebar; + }); + + const isBp = this.bpService.getByName('is'); + this.menuClick$ = this.menuService.onItemSelect() + .withLatestFrom(this.themeService.onMediaQueryChange()) + .delay(20) + .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => { + + if (bpTo.width <= isBp.width) { + this.sidebarService.collapse('menu-sidebar'); + } + }); + } + + ngOnDestroy() { + this.layoutState$.unsubscribe(); + this.sidebarState$.unsubscribe(); + this.menuClick$.unsubscribe(); + } +} |