ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 10:58:32 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

Fix sidenav closing on non-moble

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-16 18:57:53 -04:00
parent 7fe4f61e6a
commit 3abeca9a79
2 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Display/src/app/components/nav/nav.component.html
View File

@@ -1,11 +1,11 @@
<mat-toolbar color="primary"> <mat-toolbar color="primary">
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async"> <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()" *ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button> </button>
<span>Home Monitor</span> <span>Home Monitor</span>
</mat-toolbar> </mat-toolbar>
<mat-sidenav-container class="sidenav-container"> <mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer (click)="drawer.toggle()" class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true"> <mat-sidenav #sidenav (click)="toggleSidenav()" class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
<mat-nav-list> <mat-nav-list>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item> <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<mat-icon matListIcon class="nav-icon"> <mat-icon matListIcon class="nav-icon">

13
Display/src/app/components/nav/nav.component.ts
View File

@@ -1,7 +1,8 @@
import { Component } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs'; import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators'; import { map, shareReplay } from 'rxjs/operators';
import { MatSidenav } from '@angular/material';
@Component({ @Component({
selector: 'app-nav', selector: 'app-nav',
@@ -9,6 +10,8 @@ import { map, shareReplay } from 'rxjs/operators';
styleUrls: ['./nav.component.scss'] styleUrls: ['./nav.component.scss']
}) })
export class NavComponent { export class NavComponent {
@ViewChild('sidenav', null) sidenav: MatSidenav;
isHandset$: Observable<boolean> = this.breakpointObserver.observe([ isHandset$: Observable<boolean> = this.breakpointObserver.observe([
Breakpoints.HandsetLandscape, Breakpoints.HandsetLandscape,
Breakpoints.HandsetPortrait, Breakpoints.HandsetPortrait,
@@ -23,4 +26,12 @@ export class NavComponent {
); );
constructor(private breakpointObserver: BreakpointObserver) { } constructor(private breakpointObserver: BreakpointObserver) { }
public toggleSidenav() {
this.isHandset$.subscribe(isHandset => {
if (isHandset) {
this.sidenav.toggle();
}
});
}
} }