diff options
Diffstat (limited to 'webapp/src/app/@theme/layouts/xds/xds.layout.ts')
-rw-r--r-- | webapp/src/app/@theme/layouts/xds/xds.layout.ts | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/webapp/src/app/@theme/layouts/xds/xds.layout.ts b/webapp/src/app/@theme/layouts/xds/xds.layout.ts new file mode 100644 index 0000000..8987584 --- /dev/null +++ b/webapp/src/app/@theme/layouts/xds/xds.layout.ts @@ -0,0 +1,76 @@ +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-xds-layout', + styleUrls: ['./xds.layout.scss'], + templateUrl: './xds.layout.html', +}) + +export class XdsLayoutComponent implements OnDestroy { + + subMenu: NbMenuItem[] = []; + layout: any = {}; + sidebar: any = {}; + sidebarCompact = true; + + 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]]) => { + + this.sidebarCompact = false; + if (bpTo.width <= isBp.width) { + this.sidebarService.collapse('menu-sidebar'); + } + }); + + // Set sidebarCompact according to sidebar state changes + this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact)); + this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true)); + this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false); + this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false)); + } + + toogleSidebar() { + this.sidebarService.toggle(true, 'menu-sidebar'); + } + + ngOnDestroy() { + this.layoutState$.unsubscribe(); + this.sidebarState$.unsubscribe(); + this.menuClick$.unsubscribe(); + } +} |