Tweaks for phones and tablets

This commit is contained in:
2019-10-16 18:46:16 -04:00
parent eccbc4bef0
commit 7fe4f61e6a
2 changed files with 9 additions and 2 deletions

View File

@@ -5,7 +5,7 @@
<span>Home Monitor</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
<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-nav-list>
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
<mat-icon matListIcon class="nav-icon">

View File

@@ -9,7 +9,14 @@ import { map, shareReplay } from 'rxjs/operators';
styleUrls: ['./nav.component.scss']
})
export class NavComponent {
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
isHandset$: Observable<boolean> = this.breakpointObserver.observe([
Breakpoints.HandsetLandscape,
Breakpoints.HandsetPortrait,
Breakpoints.Handset,
Breakpoints.TabletLandscape,
Breakpoints.TabletPortrait,
Breakpoints.Tablet
])
.pipe(
map(result => result.matches),
shareReplay()