ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues 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">
<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>
</button>
<span>Home Monitor</span>
</mat-toolbar>
<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>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<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 { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';
import { MatSidenav } from '@angular/material';
@Component({
selector: 'app-nav',
@@ -9,6 +10,8 @@ import { map, shareReplay } from 'rxjs/operators';
styleUrls: ['./nav.component.scss']
})
export class NavComponent {
@ViewChild('sidenav', null) sidenav: MatSidenav;
isHandset$: Observable<boolean> = this.breakpointObserver.observe([
Breakpoints.HandsetLandscape,
Breakpoints.HandsetPortrait,
@@ -23,4 +26,12 @@ export class NavComponent {
);
constructor(private breakpointObserver: BreakpointObserver) { }
public toggleSidenav() {
this.isHandset$.subscribe(isHandset => {
if (isHandset) {
this.sidenav.toggle();
}
});
}
}