material-design - md-sidenav のメニューを折りたたむ

Question

md-sidenav に次のようなメニューがあります。

リストを折りたたむ/折りたたむ方法を教えてください。また、Angular Material は折りたたまれたドロップダウンに代わる「クールな」代替手段を提供していますか? sidenav のコードは次のとおりです。

    <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')">

  <md-toolbar class="md-medium-tall">
    <h3>Languages</h3>
  </md-toolbar>

  <md-list>
    <md-list-item ng-repeat="item in maindataCtrl.maindata">
        <md-button ng-click="maindataCtrl.selectUser(item)" ng-class="{'selected' : item === maindataCtrl.selected }">

          {{item.language}}
        </md-button>

       <img class="flags" ng-src="{{item.flag}}"/>

    </md-list-item>
  </md-list>

  <md-button class="md-raised">Add new language</md-button>