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 sidebarPinned = false;
33 sidebarCompact = true;
35 protected layoutState$: Subscription;
36 protected sidebarState$: Subscription;
37 protected menuClick$: Subscription;
39 private _mouseEnterStream: EventEmitter<any> = new EventEmitter();
40 private _mouseLeaveStream: EventEmitter<any> = new EventEmitter();
42 constructor(protected stateService: StateService,
43 protected menuService: NbMenuService,
44 protected themeService: NbThemeService,
45 protected bpService: NbMediaBreakpointsService,
46 protected sidebarService: NbSidebarService) {
48 this.layoutState$ = this.stateService.onLayoutState()
49 .subscribe((layout: string) => this.layout = layout);
51 this.sidebarState$ = this.stateService.onSidebarState()
52 .subscribe((sidebar: string) => {
53 this.sidebar = sidebar;
56 const isBp = this.bpService.getByName('is');
58 this.menuClick$ = this.menuService.onItemSelect()
59 .withLatestFrom(this.themeService.onMediaQueryChange())
61 .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
63 this.sidebarCompact = false;
65 // automatically collapse sidebar for narrow screen / mobile
66 if (bpTo.width <= isBp.width) {
67 this.sidebarService.collapse('menu-sidebar');
71 // Set sidebarCompact according to sidebar state changes
72 this.sidebarService.onToggle().subscribe(s => {
73 if (s.tag === 'menu-sidebar') {
74 this.sidebarPinned = false;
75 this.sidebarCompact = !this.sidebarCompact;
79 this.sidebarService.onCollapse().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = true));
80 this.sidebarService.onExpand().subscribe(s => s.tag === 'menu-sidebar' && (this.sidebarCompact = false));
81 this.menuService.onSubmenuToggle().subscribe(i => i.item && i.item.expanded && (this.sidebarCompact = false));
83 // Automatically expand sidebar on mouse over
84 this._mouseEnterStream.flatMap(e => {
88 .takeUntil(this._mouseLeaveStream);
91 if (this.sidebarPinned || !this.sidebarCompact) {
94 // this._mouseLeaveStream.emit(null);
95 this.sidebarService.toggle(false, 'menu-sidebar');
98 // Automatically collapse sidebar on mouse leave
99 this._mouseLeaveStream.flatMap(e => {
103 .takeUntil(this._mouseEnterStream);
106 if (this.sidebarPinned || this.sidebarCompact) {
109 // this._mouseEnterStream.emit(null);
110 this.sidebarService.toggle(true, 'menu-sidebar');
115 this.layoutState$.unsubscribe();
116 this.sidebarState$.unsubscribe();
117 this.menuClick$.unsubscribe();
120 onMouseEnter($event) {
121 this._mouseEnterStream.emit($event);
124 onMouseLeave($event) {
125 this._mouseLeaveStream.emit($event);
129 this.sidebarPinned = !this.sidebarPinned;