Nikunj Patel Nikunj Patel - 3 days ago 5
TypeScript Question

Collapsed sidenav in angular 2 with material 2

I'm developing SideNav using Angular 2 and Material 2,

It looks in Open State like below,

enter image description here

But on Close state it hide whole the nav,instead I want only hide menu text but not icon.

Look at my code,



<md-toolbar color="primary">
<button md-icon-button (click)="start.toggle()">
<md-icon>menu</md-icon>
</button>Test Project
<button md-icon-button (click)="logout()">
<md-icon>exit_to_app</md-icon>
</button>
</md-toolbar>

<md-sidenav-layout class="left-navigation">
<md-sidenav #start mode="side" opened="true">
<md-nav-list>
<a [routerLink]="view.link" md-list-item *ngFor="let view of views" (click)="sidenav.close()">
<md-icon md-list-icon>{{view.icon}}</md-icon>
<span md-line>{{view.name}}</span>
</a>
</md-nav-list>
</md-sidenav>
<div class="demo-sidenav-content">
<router-outlet></router-outlet>
</div>
</md-sidenav-layout>




Answer

You can follow the plunker example I have linked in this git issue here: click

It's similar to what you need, but the icons are on the other side of the sidenav, thus you would need more animation in order to keep with that structure.

But I'm pretty sure this will give you a good idea how to collapse the sidenav, leaving a portion of it still visible.

Comments