How to connect openNav in Angular - Design Material

Question

I use

<md-sidenav md-component-id="leftNav" md-is-open="vm.isOpen" md-is-locked-open="vm.isPinned" ... > <i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i> ... </md-sidenav> 

using the toggleNave method in the controller setting the value

 class MyController { constructor($mdSideNav) { this.mdSideNav = mdSideNav; this.isPinned = false; this.isOpen = false; } toggleNav = (navId) => { this.$mdSideNav(navId).toggle().then( () => { this.isPinned = this.isOpen; } } } 

But this makes the screen blink when it opens and closes, and it seems that this is not the best way to open openNav.

The desire is for the hub to open / close, but remain sticky until I close it.

If I use md-is-locked = "$ media ('')", then sideNav locks and never closes until the window shrinks below the media size. This is not what I want.

If I don't use md-locked at all, then sideNav will close when you click on it, but I want it to stay open! until I want to close it.

Does anyone know how to do this?

thanks

BTW: I use ES6, so the class and arrow functions .:-)

Answer 1

From a look at the documentation, I don’t think you need to use the isPinned and isOpen variables, as the toggle function seems to handle it.

Therefore this

 toggleNav = (navId) => { this.$mdSideNav(navId).toggle().then( () => { this.isPinned = this.isOpen; } } 

Will come

 toggleNav = (navId) => { this.$mdSideNav(navId).toggle(); } 

To do this, you need to go through id sideNav

So this is

 <i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i> 

Would become

 <i class="fa fa-bars float-right" ng-click="vm.toggleNav('leftNav')"></i> 

Finally, it is worth checking the version of Material Design that you are using, it seems that there are many problems when you are not using version> 0.8.

See the example for the right navigator in the Side Nav Material Design documents.