1 import { Component, OnDestroy, EventEmitter } 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 { Observable } from 'rxjs/Observable';
15 import 'rxjs/add/operator/withLatestFrom';
16 import 'rxjs/add/operator/delay';
17 import 'rxjs/add/observable/of';
18 import 'rxjs/add/operator/takeUntil';
20 // TODO: move layouts into the framework
22 selector: 'ngx-xds-layout',
23 styleUrls: ['./xds.layout.scss'],
24 templateUrl: './xds.layout.html',
27 export class XdsLayoutComponent implements OnDestroy {
29 subMenu: NbMenuItem[] = [];
32 sidebarCompact = true;
34 protected layoutState$: Subscription;
35 protected sidebarState$: Subscription;
36 protected menuClick$: Subscription;
38 private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
39 private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
41 constructor(protected stateService: StateService,
42 protected menuService: NbMenuService,
43 protected themeService: NbThemeService,
44 protected bpService: NbMediaBreakpointsService,
45 protected sidebarService: NbSidebarService) {
46 this.layoutState$ = this.stateService.onLayoutState()
47 .subscribe((layout: string) => this.layout = layout);
49 this.sidebarState$ = this.stateService.onSidebarState()
50 .subscribe((sidebar: string) => {
51 this.sidebar = sidebar;
54 const isBp = this.bpService.getByName('is');
55 this.menuClick$ = this.menuService.onItemSelect()
56 .withLatestFrom(this.themeService.onMediaQueryChange())
58 .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
60 this.sidebarCompact = false;
61 if (bpTo.width <= isBp.width) {
62 this.sidebarService.collapse('menu-sidebar');
66 // Set sidebarCompact according to sidebar state changes
67 this.sidebarService.onToggle().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = !this.sidebarCompact));
68 this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
69 this.sidebarService.onExpand().subscribe(() => this.sidebarCompact = false);
70 this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
72 // Automatically expand sidebar on mouse over
73 this._mouseEnterStream.flatMap(e => {
77 .takeUntil(this._mouseLeaveStream);
79 .subscribe(e => (this.sidebarCompact) && this.sidebarService.toggle(true, 'menu-sidebar'));
81 // Automatically collapse sidebar on mouse leave
82 this._mouseLeaveStream.flatMap(e => {
86 .takeUntil(this._mouseEnterStream);
88 .subscribe(e => this.sidebarService.toggle(true, 'menu-sidebar'));
91 onMouseEnter($event) {
92 this._mouseEnterStream.emit($event);
95 onMouseLeave($event) {
96 this._mouseLeaveStream.emit($event);
100 this.sidebarService.toggle(true, 'menu-sidebar');
104 this.layoutState$.unsubscribe();
105 this.sidebarState$.unsubscribe();
106 this.menuClick$.unsubscribe();