<md-button class="md-button-toggle"
  ng-click="toggle()"
  aria-controls="docs-menu-{{section.name | nospace}}"
  aria-expanded="{{isOpen()}}">
  <div flex layout="row">
    {{section.name}}
    <span flex></span>
    <span aria-hidden="true" class="md-toggle-icon"
    ng-class="{'toggled' : isOpen()}">
      <md-icon md-svg-icon="md-toggle-arrow"></md-icon>
    </span>
  </div>
  <span class="md-visually-hidden">
    Toggle {{isOpen()? 'expanded' : 'collapsed'}}
  </span>
</md-button>

<ul id="docs-menu-{{section.name | nospace}}"
  class="menu-toggle-list"
  aria-hidden="{{!renderContent}}"
  ng-style="{ visibility: renderContent ? 'visible' : 'hidden' }">

  <li ng-repeat="page in section.pages">
    <menu-link section="page"></menu-link>
  </li>
</ul>
