How to pin open a sideNav in Angular-Material Design

Question

I have ben using

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

with 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 causes the screen to flash on open and close, and it does not seem to be the best way to pin open a sideNav.

The desire is to have the nave toggle open/closed but to stay sticky open until I close it.

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

If I do not use md-is-locked at all, then the sideNav collapses shut when you click away from it, but I want it to stay open! until I want to close it.

Anyone know how to do this?

Thanks

BTW: I am using ES6, hence the class and arrow functions. :-)

Answer 1

From looking at the documentation, I don't think you need to use the isPinned and isOpen variables as it looks like the toggle function handles it.

Hence, this

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

Would be come

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

To make this work you will need to pass through the id of the sideNav

So this

<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, worth checking the version of Material Design you are using, there seems to be quite a few issues when not using the >0.8 version.

See the example for right nav in the docs Side Nav Material Design