title: Keep md-sidenav open by default
body: <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>