Material2 Auto hide sidenav on smaller screens

Question

It looks like Material2 doesn't have anything similar to Material1 opened="$mdMedia('gt-md')" that would hide and show sidenav depending upon the screenwidth.

https://github.com/angular/material2/issues/45

In the mean time, What would be the best approach to take while implementing such feature in my project.

Plunker

Answer 1

If you are using Angular Flex-Layout you could make use of the MediaObserver service and bind it to the opened property of the mat-sidenav.

@Component({
selector: 'my-component',
template: `  
  <md-sidenav-container>
    <md-sidenav
      mode="over"
      [opened]="!media.isActive('xs')">
    </md-sidenav>
    ...        
  </md-sidenav-container>`
})
export class MyComponent {    
   constructor(public media: MediaObserver) {}
}

This will hide the sidenav on mobile viewport sizes.

Answer 2

Here i have used : https://material.angular.io/

app.component.html

import { Component } from "@angular/core";
import { AuthService } from "./auth.service";
import { Router } from "@angular/router";


export class User {
  id: number;
  username: string;
  firstName: string;
  lastName: string;
  token: string;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  MenuRoutesArr = [
    { path: "dashboard", pathName: "Dashboard" },
    { path: "user", pathName: "Users" }
  ];
  currentUser: User;
  screenWidth: number;
  title = "FrontEnd";
  constructor(
    private router: Router,
    private authenticationService: AuthService
  ) {
    this.screenWidth = window.innerWidth;
    window.onresize = () => {
      // set screenWidth on screen size change
      this.screenWidth = window.innerWidth;
    };
    //snav.toggle()
    this.authenticationService.currentUser.subscribe(
      x => (this.currentUser = x)
    );
  }

}

app.component.html

<mat-toolbar color="primary">
  <button mat-icon-button (click)="snav.toggle()" [ngStyle]="{ display: screenWidth > 840 ? 'none' : 'block' }">
    <mat-icon>menu</mat-icon>
  </button>
  <h1>Responsive App</h1>
  <span class="fill-space"></span>

  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
    <i class="material-icons">
      account_circle
    </i>
  </button>

  <mat-menu #menu="matMenu">
    <button mat-menu-item>
      <i class="fa fa-cog" aria-hidden="true"></i>
      <span>Config Profile</span>
    </button>

    <button mat-menu-item>
      <i class="fa fa-sign-out" aria-hidden="true"></i>
      <span>Logout</span>
    </button>
  </mat-menu>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #snav [opened]="screenWidth > 840" [mode]="screenWidth > 840 ? 'side' : 'over'" fixedTopGap="56">
    <mat-nav-list>
      <a mat-list-item class="nav-item nav-link" (click)="(screenWidth > 840) ? '' : snav.toggle()" *ngFor="let routePath of MenuRoutesArr"
        [routerLink]="[routePath.path]">{{ routePath.pathName }}</a> 
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <p>
      <router-outlet></router-outlet>
    </p>
  </mat-sidenav-content>
</mat-sidenav-container>

Full Width Sample Image:

Smaller Screen Sample Image:

Smaller Screen After menu Select Sample Image:

Sample Output

Answer 3

Hi this is how i solved this problem.

App.component.html

<mat-sidenav-container class="container">
    <mat-sidenav class="sidenav" #sidenav mode="side" [opened]="screenWidth> 640">
        <mat-toolbar color="primary">
            <h1>Sidenav</h1>
        </mat-toolbar>
        <mat-list role="list">
            <mat-list-item role="listitem">Item 1</mat-list-item>
            <mat-list-item role="listitem">Item 2</mat-list-item>
            <mat-list-item role="listitem">Item 3</mat-list-item>
        </mat-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="content-container">
            <h1> text content</h1>
            <p>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the         
            </p>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

app.component.ts

import { Component, ViewChild, HostListener  } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import {MatSidenav} from '@angular/material/sidenav';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  screenWidth: number;
  private screenWidth$ = new BehaviorSubject<number>(window.innerWidth);
  @ViewChild('sidenav') sidenav: MatSidenav;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.screenWidth$.next(event.target.innerWidth);
  }
  constructor() { }

  ngOnInit() {
    this.screenWidth$.subscribe(width => {
      this.screenWidth = width;
    });
  }
}

here is the code in slackblitz

Answer 4

Simple solution:

  screenHeight: number;
  screenWidth: number;

  constructor() {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

In our view:

<mat-sidenav #sidenav class="example-sidenav" [opened]="screenWidth > 840" mode="side">

Answer 5

Here's one way of doing it.

app.component.html

<md-sidenav-layout>
   <md-sidenav #sidenav mode="side"><label>Sidenav</label></md-sidenav>
   <button md-raised-button="md-raised-button" color="primary" (click)="sidenav.toggle()">Open Sidenav</button>
</md-sidenav-layout>

app.component.ts

import { Component, ViewChild, HostListener } from '@angular/core';
import {MdSidenav} from "@angular/material";

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    @ViewChild('sidenav') sidenav: MdSidenav;

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        if (event.target.innerWidth < 500) {
            this.sidenav.close();
        }
    }
}