[ACA-1892] close sidenav when navigate on mobile (#730)

This commit is contained in:
Cilibiu Bogdan 2018-10-18 09:37:37 +03:00 committed by Denys Vuika
parent 3278ec7f70
commit 9012c0832b

View File

@ -37,11 +37,12 @@ import {
} from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject, Observable } from 'rxjs';
import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
import { NodePermissionService } from '../../services/node-permission.service';
import { currentFolder } from '../../store/selectors/app.selectors';
import { AppStore } from '../../store/states';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-layout',
@ -70,7 +71,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
private permission: NodePermissionService,
private router: Router,
private userPreferenceService: UserPreferencesService,
private appConfigService: AppConfigService
private appConfigService: AppConfigService,
private breakpointObserver: BreakpointObserver
) {}
ngOnInit() {
@ -92,12 +94,24 @@ export class LayoutComponent implements OnInit, OnDestroy {
this.canUpload = node && this.permission.check(node, ['create']);
});
this.router.events
.pipe(
withLatestFrom(this.isSmallScreen()),
filter(
([event, isSmallScreen]) =>
isSmallScreen && event instanceof NavigationEnd
)
)
.subscribe(() => {
this.layout.container.toggleMenu();
});
this.router.events
.pipe(
filter(event => event instanceof NavigationEnd),
takeUntil(this.onDestroy$)
)
.subscribe((event: any) => {
.subscribe((event: NavigationEnd) => {
this.minimizeSidenav = this.minimizeConditions.some(el =>
event.urlAfterRedirects.includes(el)
);
@ -156,4 +170,10 @@ export class LayoutComponent implements OnInit, OnDestroy {
return expand;
}
private isSmallScreen(): Observable<boolean> {
return this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
.pipe(map(result => result.matches));
}
}