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