feat(sidenav): add swipe functionality

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

It’d be great to have the functionality of swipe in md-sidenav, like in https://material.io/guidelines/.

What are the steps to reproduce?

Open https://material.io/guidelines/ in mobile and see how the swipe on menu works.

Is there anything else we should know?

The same feature request was requested in material(1) here and at some point it was implemented, but not merged.

[maxfriedmann]

@Swoox’s solution didn’t work for me, but brought me to hammerjs and this solution:

app-container.component.scss

.app-container {
    height: 100%;
    width: 100%;
    position: absolute;
}

app-container.component.html

<mat-sidenav-container class="app-container">
  <mat-sidenav #sidenav>Sidenav content</mat-sidenav>
  <mat-sidenav-content>
    Main Content
  </mat-sidenav-content>
</mat-sidenav-container>

app-container.component.ts

import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import * as Hammer from 'hammerjs';
import { MatSidenav } from '@angular/material';

@Component({
    selector: 'app-container',
    templateUrl: './app-container.component.html',
    styleUrls: ['./app-container.component.scss']
})
export class AppContainerComponent {

    @ViewChild(MatSidenav)
    public sidenav: MatSidenav;

    constructor(elementRef: ElementRef) {
        const hammertime = new Hammer(elementRef.nativeElement, {});
        hammertime.on('panright', (ev) => {
            this.sidenav.open();
        });
        hammertime.on('panleft', (ev) => {
            this.sidenav.close();
        });
    }
}

It works as long as the content doesn’t exceed the width of 100%, otherwise it will scroll the page and open the menu.

[jelbourn]

We do plan on doing this.