Angular 2 Material 2 Sidenav Toolbar collapse like Navigation Drawer

Question

I have a sidenav and a nested toolbar
toolbar.html

Answer 1

This problem is little unusual. Since the button from toolbar is controlling the open and close state, I had to add an EventListener to pass the state of sidenav whenever the button is clicked.

Based on the event flag, I added some ngStyle that will maintain the width of sidenav. Note that, the sidenav is always open now [add property opened="true"], since it's always visible. I also ended up using the emitted flag from toolbar to use for 'Sidenav' title. You can remove it if you need to show the partial 'Sid'.

Also, since the sidenav is always open, I added custom css to animate the change of width.

Plunker demo

toolbar.component.ts:

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @Input() sidenav;

  @Output()
  change: EventEmitter = new EventEmitter();

  constructor() { 
    console.log(this.sidenav);
  }

  ngOnInit() {
  }

  toggle(){
    this.shortnav = !this.shortnav;
    console.log("shortnav: " + this.shortnav)
    this.change.emit(this.shortnav);
  }

}

toolbar.component.html:

sidenav.component.ts:

export class SidenavOverviewExample {

  showSidenavTitle = false;
  sidenavWidth = 2.75;

  changeWidth(showShortNav){
    if(showShortNav){
      this.sidenavWidth = 2.5;
      this.showSidenavTitle = false;
    }
    else{
      this.sidenavWidth = 13;
      this.showSidenavTitle = true;
    }
  }
}

sidenav.component.html:

    
     
       Sidenav
     
        
          home HOME
          
          
            home HOME
          
      

      

 

sidenav.component.css:

.mat-sidenav-transition .mat-sidenav{
  /* custom animation to grow and shrink width */
  -webkit-transition: width .3s !important; /* For Safari 3.1 to 6.0 */
  transition: width .3s !important;
}

Hope this helps you :)