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-xds-layout',
20 styleUrls: ['./xds.layout.scss'],
21 templateUrl: './xds.layout.html',
24 export class XdsLayoutComponent implements OnDestroy {
26 subMenu: NbMenuItem[] = [];
29 sidebarCompact = true;
31 protected layoutState$: Subscription;
32 protected sidebarState$: Subscription;
33 protected menuClick$: Subscription;
35 constructor(protected stateService: StateService,
36 protected menuService: NbMenuService,
37 protected themeService: NbThemeService,
38 protected bpService: NbMediaBreakpointsService,
39 protected sidebarService: NbSidebarService) {
40 this.layoutState$ = this.stateService.onLayoutState()
41 .subscribe((layout: string) => this.layout = layout);
43 this.sidebarState$ = this.stateService.onSidebarState()
44 .subscribe((sidebar: string) => {
45 this.sidebar = sidebar;
48 const isBp = this.bpService.getByName('is');
49 this.menuClick$ = this.menuService.onItemSelect()
50 .withLatestFrom(this.themeService.onMediaQueryChange())
52 .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
54 this.sidebarCompact = false;
55 if (bpTo.width <= isBp.width) {
56 this.sidebarService.collapse('menu-sidebar');
60 // Set sidebarCompact according to sidebar state changes
61 this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact));
62 this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
63 this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false);
64 this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
68 this.sidebarService.toggle(true, 'menu-sidebar');
72 this.layoutState$.unsubscribe();
73 this.sidebarState$.unsubscribe();
74 this.menuClick$.unsubscribe();