title: Collapse menu in md-sidenav
body: <p>I have a menu in my md-sidenav that looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WG6eb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WG6eb.png" alt="Picture of left sidenav"></a></p>
  
  <p>How do I collapse/uncollapse the list? And does Angular Material offer any "cool" alternatives to a collapsed dropdown? Here is the code for the sidenav:</p>
  
  <pre><code>    &lt;md-sidenav class="site-sidenav md-sidenav-left md-whiteframe-z2"
      md-component-id="left"
      ng-click="maindataCtrl.toggleList()" aria-label="Show Language List"
      md-is-locked-open="$mdMedia('gt-sm')"&gt;
  
    &lt;md-toolbar class="md-medium-tall"&gt;
      &lt;h3&gt;Languages&lt;/h3&gt;
    &lt;/md-toolbar&gt;
  
    &lt;md-list&gt;
      &lt;md-list-item ng-repeat="item in maindataCtrl.maindata"&gt;
          &lt;md-button ng-click="maindataCtrl.selectUser(item)" ng-class="{'selected' : item === maindataCtrl.selected }"&gt;
  
            {{item.language}}
          &lt;/md-button&gt;
  
         &lt;img class="flags" ng-src="{{item.flag}}"/&gt;
  
      &lt;/md-list-item&gt;
    &lt;/md-list&gt;
  
    &lt;md-button class="md-raised"&gt;Add new language&lt;/md-button&gt;
  </code></pre>
  
  <p></p>