<!DOCTYPE html>
<html>
<head>
  <title>Angular 2 Docs</title>
  <base href="/">

  <link rel="stylesheet" type="text/css" href="/lib/angular-material/angular-material.css">
  <link rel="stylesheet" type="text/css" href="/css/prettify-theme.css">
  <link rel="stylesheet" type="text/css" href="/css/app.css">

  <script src="/lib/hammerjs/hammer.js"></script>
  <script src="/lib/google-code-prettify/src/prettify.js"></script>
  <script src="/lib/google-code-prettify/src/lang-css.js"></script>
  <script src="/lib/angular/angular.js"></script>
  <script src="/lib/angular-animate/angular-animate.js"></script>
  <script src="/lib/angular-aria/angular-aria.js"></script>
  <script src="/lib/angular-material/angular-material.js"></script>
  <script src="/js/navigation-modules.js"></script>
  <script src="/js/navigation-guides.js"></script>
  <script src="/js/app.js"></script>
  <script src="/js/code.js"></script>
</head>
<body ng-app="app" ng-controller="NavController as nav" layout="column">

  <md-toolbar md-scroll-shrink>
    <h1 class="md-toolbar-tools">Angular V2</h1>
  </md-toolbar>

  <section layout="row">

    <md-content class="left-nav">
      <h2>Navigation</h2>
      <section ng-repeat="area in nav.areas">
        <h3>{{ area.name }}</h3>
        <md-list>
          <md-item ng-repeat="section in area.sections">
            <h3><a href="{{section.path}}">{{section.name}}</a></h3>
            <ul>
              <li ng-repeat="page in section.pages">
                <a href="{{page.path}}">{{ page.name }}</a>
              </li>
            </ul>
          </md-item>
        </md-list>
        </section>
    </md-content>


    <md-content class="md-padding">
      <ng-include autoscroll src="nav.currentPage.partial"></ng-include>
    </md-content>

  </section>
</body>
</html>