Keep md-sidenav open by default
<p>I have created a <code>md-sidenav</code>. I want to keep the <code>sidenav</code> open by default, but i still want the <code>sidenav</code> to be displayed overlaying the page and I want to be able to close the <code>sidenav</code>- therefore I don't want to use the <code>md-is-locked-open</code> expression. Any ideas how I can accomplish this? </p>

<p>html Code: </p>

<pre><code>&lt;md-button class="md-icon-button hamburger" aria-label="More" ng-click="openLeftMenu()" style="height: auto;"&gt;
            &lt;md-icon md-svg-icon="images/menu.svg"&gt;&lt;/md-icon&gt;

        &lt;/md-button&gt;

&lt;md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2 menuside" md-component-id="left"&gt; 

    &lt;div class="navheader" layout="row" layout-align="space-between center"&gt;

        &lt;!--show location--&gt;
        &lt;md-button ui-sref="map" ng-click="openLeftMenu()" md-ink-ripple="false" class="yourlocation" layout="row" layout-align="start center" aria-label="Current-location"&gt;
            &lt;p class="locationtext"&gt;{{currentLocation}}&lt;/p&gt;
        &lt;/md-button&gt;


        &lt;!--close menu--&gt;
        &lt;button class="hambugerclose" ng-click="openLeftMenu()"&gt;
            &lt;i class="material-icons"&gt;clear&lt;/i&gt;
        &lt;/button&gt;

    &lt;/div&gt;

    &lt;!--MOBILE MENU GRID--&gt;
    &lt;div layout="row" layout-align="center center" class="jumbowrapper2" layout-wrap&gt;
        &lt;div ng-repeat="navitem in navitems" class="navitemwrap" flex="33"&gt;
            &lt;md-button md-ink-ripple="false" layout="column" layout-align="center center" ui-sref="{{navitem.path}}" href="{{navitem.link}}" ng-click="openLeftMenu()" class="itembutton"&gt;
                &lt;div class="iconoutline" layout="column" layout-align="center center"&gt;
                    &lt;md-icon class="itemicon" md-svg-src="{{navitem.icon}}"&gt;&lt;/md-icon&gt;
                &lt;/div&gt;
                &lt;p class="itemtext2" translate&gt;{{navitem.title}}&lt;/p&gt;
            &lt;/md-button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

&lt;/md-sidenav&gt;
</code></pre>

<p>Js Code:</p>

<pre><code>$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
</code></pre>

<p>Thank you!</p>