Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-22 17:26:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(sidebar): hide on mobile when navigation is complete

Browse source
This commit is contained in:
Dmitry Nehaychik 2017-09-19 21:00:24 +03:00
parent 5839bdd3cf
commit d5db2d0614
6 changed files with 255 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/app/@theme/layouts/sample/sample.layout.ts
View file

@ -1,9 +1,19 @@
import { Component, OnDestroy } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';
import { Subscription } from 'rxjs/Subscription';
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',
@ -100,8 +110,13 @@ export class SampleLayoutComponent implements OnDestroy {
protected layoutState$: Subscription;
protected sidebarState$: Subscription;
protected menuClick$: Subscription;
constructor(protected stateService: StateService) {
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);
@ -109,10 +124,22 @@ export class SampleLayoutComponent implements OnDestroy {
.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();
}
}