Clever Geek Handbook

Angular 2 Material 2 Sidenav Toolbars like Navigation Drawer

I have a sidenav and a nested
toolbar.html

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" color="primary">
     <md-toolbar color="primary"><span>Sidenav</span></md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>
      <app-toolbar [sidenav]="sidenav"></app-toolbar>
</md-sidenav-container>

sidenav.html

<md-toolbar color="primary">
  <button md-button class="toolbar-menu-button"
          (click)="sidenav.toggle(); isCollapsed = !isCollapsed">
    <md-icon [@iconChange]="isCollapsed">menu</md-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <button md-button class="toolbar-link" >DASHBOARD</button>
  <span class="toolbar-spacer"></span>
</md-toolbar>

https://plnkr.co/edit/up19ZNJyMt6uatqdI9uv?p=preview

I would like to close sidenav to home icon like Navigation Drawer

close sidenav sidenav close

open sidenav sidenav open

+3


source to share


2 answers


This problem is a bit unusual. Since the button on the toolbar controls the "open" and "closed" EventListener

state , I had to add to pass the state sidenav

whenever the button is clicked.

Based on the flag, event

I added a few ngStyle

that will maintain the width sidenav

. Note that it is sidenav

always open now [add property opened="true"

], as it is always displayed. I also ended up using the highlighted flag from the toolbar for use in the title "Sidenav". You can remove it if you need to show a partial "LED".

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

plunger demonstration

toolbar.component.ts:

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @Input() sidenav;

  @Output()
  change: EventEmitter<booelan> = new EventEmitter<boolean>();

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

  ngOnInit() {
  }

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

}

toolbar.component.html:

<button md-button class="toolbar-menu-button"
          (click)="toggle(); isCollapsed = !isCollapsed">


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:

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side"   
                color="primary" 
                opened="true"
                [ngStyle]="{ 'width.em': sidenavWidth }"
                class="animate-sidenav">
     <md-toolbar color="primary">
       <span *ngIf="showSidenavTitle">Sidenav</span>
     </md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>

      <app-toolbar [sidenav]="sidenav" (change)="changeWidth($event)"></app-toolbar>

 </md-sidenav-container>

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 :)

+2


source


enter image description here

This can be achieved with a simple css hack. We can call the boost () and reduce () methods that change the sidenav width based on some event like mouseenter and mouseleave or in your case onClick of "toolbar -menu buttons"

<md-sidenav #sidenav mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseover)="increase()"   (mouseleave)="decrease()">

This will increase the width of the sidenav when we point to the sidenav and decrease the width when we point the mouse pointer elsewhere.



  increase(){
    this.sidenavWidth = 15;
  }
  decrease(){
    this.sidenavWidth = 4;
  }

Take a look at this demo: - https://mini-sidenav.firebaseapp.com/

and the github repo: - https://github.com/Ravi-Rajpurohit/mini-md-sidenav

Hope this helps :-)

+3


source






More articles:


All Articles