md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element)
  nav
    h1 <a href="/" md-button>Angular <sup>by Google</sup></a>

    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>

    ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
      li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
      li.l-left <a class="main-nav-button" href="/docs/ts/latest/" md-button>Docs</a>
      li.l-left <a class="main-nav-button" href="/about/" md-button>About</a>
      li.l-left <a class="main-nav-button" href="/contribute.html" md-button>Contribute</a>
      li.l-left <a class="main-nav-button" href="/support.html" md-button>Support</a>
      li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
      li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
      li.l-right.feedback-button <md-button ng-click="appCtrl.openFeedback()" class="md-icon-button top-nav-icon" aria-label="Submit feedback on this page"><span class="material-icons">feedback</span></md-button>