From 6784497e4ba8b064c78ea65391be69f3b6feb836 Mon Sep 17 00:00:00 2001
From: Marcy Sutton <marcy@substantial.com>
Date: Fri, 2 Jan 2015 23:26:54 -0800
Subject: [PATCH] docs(): update sidenav, add new getting started page

closes #1116
---
 docs/app/css/style.css                      | 156 +++++++---
 docs/app/img/icons/list_control_down.png    | Bin 0 -> 309 bytes
 docs/app/js/app.js                          | 297 +++++++++++++++-----
 docs/app/partials/getting-started.tmpl.html |  41 +++
 docs/app/partials/home.tmpl.html            |  64 +++--
 docs/app/partials/menu-link.tmpl.html       |   8 +
 docs/app/partials/menu-toggle.tmpl.html     |  18 ++
 docs/config/template/index.template.html    |  50 ++--
 8 files changed, 481 insertions(+), 153 deletions(-)
 create mode 100644 docs/app/img/icons/list_control_down.png
 create mode 100644 docs/app/partials/getting-started.tmpl.html
 create mode 100644 docs/app/partials/menu-link.tmpl.html
 create mode 100644 docs/app/partials/menu-toggle.tmpl.html

diff --git a/docs/app/css/style.css b/docs/app/css/style.css
index 33771f8e550..c66b6ceb0d8 100644
--- a/docs/app/css/style.css
+++ b/docs/app/css/style.css
@@ -9,6 +9,10 @@ body {
 
 a {
   color: #3f51b5;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  text-decoration: underline;
 }
 
 table {
@@ -79,6 +83,17 @@ code:not(.highlight) {
   -webkit-font-smoothing: auto;
 }
 
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  text-transform: none;
+  width: 1px;
+}
 .md-sidenav-inner {
   background: #fff;
 }
@@ -95,58 +110,99 @@ code:not(.highlight) {
   margin-bottom: 15px;
 }
 
-.menu-item {
-  background: none;
-  border-width: 0;
+/* Begin Docs Menu */
+.docs-menu,
+.docs-menu ul {
+  list-style: none;
+  padding: 0;
+}
+.docs-menu li {
+  margin: 0;
+}
+.docs-menu > li {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+.docs-menu .md-button {
+  border-radius: 0;
+  color: inherit;
   cursor: pointer;
-  display: block;
-  color: #333;
-  font-size: inherit;
+  font-weight: 400;
   line-height: 40px;
-  max-height: 40px;
-  opacity: 1;
   margin: 0;
-  outline: none;
-  padding: 0px 28px;
-  position: relative;
+  max-height: 40px;
+  overflow: hidden;
+  padding: 0px 16px;
   text-align: left;
   text-decoration: none;
+  white-space: normal;
   width: 100%;
-  z-index: 1;
-  -webkit-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  -webkit-transition-property: max-height, background-color, opacity;
-  -moz-transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  -moz-transition-property: max-height, background-color, opacity;
-  transition: 0.45s cubic-bezier(0.35, 0, 0.25, 1);
-  transition-property: max-height, background-color, opacity;
-}
-.menu-item.ng-hide {
-  max-height: 0;
-  opacity: 0;
 }
-.menu-item:hover {
-  color: #999;
+.docs-menu a.md-button {
+  display: block;
 }
-.menu-item:focus {
-  font-weight: bold;
+.docs-menu button.md-button::-moz-focus-inner {
+  padding: 0;
+}
+.docs-menu .md-button.active {
+  color: #03a9f4;
 }
-.menu-item.menu-title {
+.menu-heading {
   color: #888;
-  font-size: 14px;
-  padding-left: 16px;
+  display: block;
+  font-size: inherit;
+  font-weight: 500;
+  line-height: 40px;
+  margin: 0;
+  padding: 0px 16px;
   text-align: left;
-  text-transform: uppercase;
-  transition: color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
+  width: 100%;
 }
-.menu-item.menu-title:hover,
-.menu-item.menu-title.active {
-  color: #1976d2;
+.docs-menu li.parentActive,
+.docs-menu li.parentActive .menu-toggle-list {
+  background-color: #f6f6f6;
 }
+.menu-toggle-list {
+  background: #fff;
+  max-height: 999px;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
+  -webkit-transition-property: max-height;
+  -moz-transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
+  -moz-transition-property: max-height;
+  transition: 0.75s cubic-bezier(0.35, 0, 0.25, 1);
+  transition-property: max-height;
+}
+.menu-toggle-list.ng-hide {
+  max-height: 0;
+}
+.docs-menu .menu-toggle-list a.md-button {
+  display: block;
+  padding: 0 16px 0 32px;
+  text-transform: none;
+}
+.md-button-toggle .md-toggle-icon {
+  background: transparent url(img/icons/list_control_down.png) no-repeat center center;
+  background-size: 100% auto;
+  display: inline-block;
+  height: 24px;
+  margin: auto 0 auto auto;
+  speak: none;
+  width: 24px;
+  transition: transform 0.2s ease-in-out;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out;
+}
+.md-button-toggle .md-toggle-icon.toggled {
+  transform: rotate(180deg);
+}
+/* End Docs Menu */
 
 .menu-icon {
   background: none;
   border: none;
   margin-right: 16px;
+  padding: 0;
 }
 .app-toolbar .md-toolbar-tools h3 {
   -webkit-margin-before: 0;
@@ -310,8 +366,38 @@ md-toolbar.demo-toolbar .md-button {
   font-size: 18px;
 }
 
+/***************
+ * Landing Page
+ ***************/
+ul.buckets {
+  margin: 24px 0;
+  padding: 0;
+}
+ul.buckets li {
+  list-style: none;
+  margin: 0;
+  text-align: center;
+}
+ul.buckets li md-card md-card-content {
+  padding: 0;
+}
+ul.buckets li a {
+  background-color: transparent;
+  display: block;
+  font-weight: 500;
+  padding: 16px 0;
+  text-decoration: none;
+  -webkit-transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+  transition: all 0.45s cubic-bezier(0.35, 0, 0.25, 1);
+}
+ul.buckets li a:hover,
+ul.buckets li a:focus {
+  background-color: #03a9f4;
+  color: white;
+}
+
 /************
- * DOCS
+ * API DOCS
  ************/
 .api-options-bar .md-button {
   margin: 4px;
diff --git a/docs/app/img/icons/list_control_down.png b/docs/app/img/icons/list_control_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff322f44b53a4c42e81151021e5258293cc5988d
GIT binary patch
literal 309
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA3?vioaBc-sk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5X)B}7%Tvx1E@#oK<0|yRl+qUid_wTD#t@`%u+p}lSUc7j*
zb?er{hYvq}`t<+*|4}}r_kdb>OM?7@fm}FXuzjJ_29)Ubba4!+xb^0Wr%;0ekIO|C
zmO1b0<4!kTO4vRv`|zb-`3pHu{rT9z%)Xzo_Bz|ndZys6-V@GRGE-ENT;*KW7$k^n
zR673kq(>v0_O7-3r|uu*y0Sg~rB*`y?8BM`_3|;IOV}sdvAn#P^`_}d!Sq!QwsHGn
x56sJXtyOUTS~T;^m$d<3=Ql93uTK|DVA${^m0i63RV~n244$rjF6*2UngAs2jottN

literal 0
HcmV?d00001

diff --git a/docs/app/js/app.js b/docs/app/js/app.js
index 0868e57ab67..ba2d3bf4e3b 100644
--- a/docs/app/js/app.js
+++ b/docs/app/js/app.js
@@ -15,6 +15,24 @@ function(COMPONENTS, DEMOS, PAGES, $routeProvider, $mdThemingProvider) {
       templateUrl: function(params){
         return 'partials/layout-' + params.tmpl + '.tmpl.html';
       }
+    })
+    .when('/layout/', {
+      redirectTo: function() {
+        return "/layout/container";
+      }
+    })
+    .when('/demo/', {
+      redirectTo: function() {
+        return DEMOS[0].url;
+      }
+    })
+    .when('/api/', {
+      redirectTo: function() {
+        return COMPONENTS[0].docs[0].url;
+      }
+    })
+    .when('/getting-started', {
+      templateUrl: 'partials/getting-started.tmpl.html'
     });
 
   $mdThemingProvider.theme('docs-dark', 'default')
@@ -86,69 +104,105 @@ function(Angularytics, $rootScope,$timeout) {
 function(COMPONENTS, DEMOS, PAGES, $location, $rootScope) {
 
   var sections = [{
-    name: 'Layout',
-    pages: [{
-      name: 'Container Elements',
-      id: 'layoutContainers',
-      url: '/layout/container'
-    },{
-      name: 'Grid System',
-      id: 'layoutGrid',
-      url: '/layout/grid'
-    },{
-      name: 'Child Alignment',
-      id: 'layoutAlign',
-      url: '/layout/alignment'
-    },{
-      name: 'Options',
-      id: 'layoutOptions',
-      url: '/layout/options'
-    }]
+    name: 'Getting Started',
+    url: '/getting-started',
+    type: 'link'
   }];
 
-  var docsByModule = {};
-  var apiDocs = {};
-  COMPONENTS.forEach(function(component) {
-    component.docs.forEach(function(doc) {
-      if (angular.isDefined(doc.private)) return;
-      apiDocs[doc.type] = apiDocs[doc.type] || [];
-      apiDocs[doc.type].push(doc);
-
-      docsByModule[doc.module] = docsByModule[doc.module] || [];
-      docsByModule[doc.module].push(doc);
-    });
-  });
   var demoDocs = [];
   angular.forEach(DEMOS, function(componentDemos) {
     demoDocs.push({
       name: componentDemos.label,
       url: componentDemos.url
     });
-    (docsByModule[componentDemos.name] || []).forEach(function(doc) {
-      doc.hasDemo = true;
-    });
   });
 
-  sections.unshift({
+  sections.push({
     name: 'Demos',
-    pages: demoDocs.sort(sortByName)
+    pages: demoDocs.sort(sortByName),
+    type: 'toggle'
   });
 
-  angular.forEach(PAGES, function(pages, area) {
-    sections.push({
-      name: area,
-      pages: pages
-    });
-  });
+  sections.push();
 
   sections.push({
-    name: 'Services',
-    pages: apiDocs.service.sort(sortByName)
+    name: 'Customization',
+    type: 'heading',
+    children: [{
+      name: 'Theming',
+      type: 'toggle',
+      pages: [{
+        name: 'Introduction and Terms',
+        url: '/Theming/01_introduction',
+        type: 'link'
+      },
+      {
+        name: 'Declarative Syntax',
+        url: '/Theming/02_declarative_syntax',
+        type: 'link'
+      },
+      {
+        name: 'Configuring a Theme',
+        url: '/Theming/03_configuring_a_theme',
+        type: 'link'
+      },
+      {
+        name: 'Multiple Themes',
+        url: '/Theming/04_multiple_themes',
+        type: 'link'
+      }]
+    }]
   });
+
+  var docsByModule = {};
+  var apiDocs = {};
+  COMPONENTS.forEach(function(component) {
+    component.docs.forEach(function(doc) {
+      if (angular.isDefined(doc.private)) return;
+      apiDocs[doc.type] = apiDocs[doc.type] || [];
+      apiDocs[doc.type].push(doc);
+
+      docsByModule[doc.module] = docsByModule[doc.module] || [];
+      docsByModule[doc.module].push(doc);
+    });
+  });
+
   sections.push({
-    name: 'Directives',
-    pages: apiDocs.directive.sort(sortByName)
+    name: 'API Reference',
+    type: 'heading',
+    children: [
+    {
+      name: 'Layout',
+      type: 'toggle',
+      pages: [{
+        name: 'Container Elements',
+        id: 'layoutContainers',
+        url: '/layout/container'
+      },{
+        name: 'Grid System',
+        id: 'layoutGrid',
+        url: '/layout/grid'
+      },{
+        name: 'Child Alignment',
+        id: 'layoutAlign',
+        url: '/layout/alignment'
+      },{
+        name: 'Options',
+        id: 'layoutOptions',
+        url: '/layout/options'
+      }]
+    },
+    {
+      name: 'Services',
+      pages: apiDocs.service.sort(sortByName),
+      type: 'toggle'
+    },{
+      name: 'Directives',
+      pages: apiDocs.directive.sort(sortByName),
+      type: 'toggle'
+    }]
   });
+
   function sortByName(a,b) {
     return a.name < b.name ? -1 : 1;
   }
@@ -175,7 +229,7 @@ function(COMPONENTS, DEMOS, PAGES, $location, $rootScope) {
       self.currentSection = section;
       self.currentPage = page;
     },
-    isPageSelected: function(section, page) {
+    isPageSelected: function(page) {
       return self.currentPage === page;
     }
   };
@@ -186,23 +240,81 @@ function(COMPONENTS, DEMOS, PAGES, $location, $rootScope) {
   }
 
   function onLocationChange() {
-    var activated = false;
     var path = $location.path();
+
+    var matchPage = function(section, page) {
+      if (path === page.url) {
+        self.selectSection(section);
+        self.selectPage(section, page);
+      }
+    };
+
     sections.forEach(function(section) {
-      section.pages.forEach(function(page) {
-        if (path === page.url) {
-          self.selectSection(section);
-          self.selectPage(section, page);
-          activated = true;
-        }
-      });
+      if(section.children) {
+        // matches nested section toggles, such as API or Customization
+        section.children.forEach(function(childSection){
+          if(childSection.pages){
+            childSection.pages.forEach(function(page){
+              matchPage(childSection, page);
+            });
+          }
+        });
+      }
+      else if(section.pages) {
+        // matches top-level section toggles, such as Demos
+        section.pages.forEach(function(page) {
+          matchPage(section, page);
+        });
+      }
+      else if (section.type === 'link') {
+        // matches top-level links, such as "Getting Started"
+        matchPage(section, section);
+      }
     });
-    if (!activated) {
-      self.selectSection(sections[3]);
-    }
   }
 }])
 
+.directive('menuLink', function() {
+  return {
+    scope: {
+      section: '='
+    },
+    templateUrl: 'partials/menu-link.tmpl.html',
+    link: function($scope, $element) {
+      var controller = $element.parent().controller();
+
+      $scope.isSelected = function() {
+        return controller.isSelected($scope.section);
+      };
+    }
+  };
+})
+
+.directive('menuToggle', function() {
+  return {
+    scope: {
+      section: '='
+    },
+    templateUrl: 'partials/menu-toggle.tmpl.html',
+    link: function($scope, $element) {
+      var controller = $element.parent().controller();
+
+      $scope.isOpen = function() {
+        return controller.isOpen($scope.section);
+      };
+      $scope.toggle = function() {
+        controller.toggleOpen($scope.section);
+      };
+
+      var parentNode = $element[0].parentNode.parentNode.parentNode;
+      if(parentNode.classList.contains('parent-list-item')) {
+        var heading = parentNode.querySelector('h2');
+        $element[0].firstChild.setAttribute('aria-describedby', heading.id);
+      }
+    }
+  };
+})
+
 .controller('DocsCtrl', [
   '$scope',
   'COMPONENTS',
@@ -213,36 +325,80 @@ function(COMPONENTS, DEMOS, PAGES, $location, $rootScope) {
   'menu',
   '$location',
   '$rootScope',
-function($scope, COMPONENTS, BUILDCONFIG, $mdSidenav, $timeout, $mdDialog, menu, $location, $rootScope) {
+  '$log',
+function($scope, COMPONENTS, BUILDCONFIG, $mdSidenav, $timeout, $mdDialog, menu, $location, $rootScope, $log) {
   $scope.COMPONENTS = COMPONENTS;
   $scope.BUILDCONFIG = BUILDCONFIG;
-
   $scope.menu = menu;
 
-  var mainContentArea = document.querySelector("[role='main']");
+  $scope.path = path;
+  $scope.goHome = goHome;
+  $scope.openMenu = openMenu;
+  $scope.closeMenu = closeMenu;
+  $scope.isSectionSelected = isSectionSelected;
 
   $rootScope.$on('$locationChangeSuccess', openPage);
 
-  $scope.closeMenu = function() {
+  // Methods used by menuLink and menuToggle directives
+  this.isOpen = isOpen;
+  this.isSelected = isSelected;
+  this.toggleOpen = toggleOpen;
+
+  var mainContentArea = document.querySelector("[role='main']");
+
+  // *********************
+  // Internal methods
+  // *********************
+
+  function closeMenu() {
     $timeout(function() { $mdSidenav('left').close(); });
-  };
-  $scope.openMenu = function() {
+  }
+
+  function openMenu() {
     $timeout(function() { $mdSidenav('left').open(); });
-  };
+  }
 
-  $scope.path = function() {
+  function path() {
     return $location.path();
-  };
+  }
 
-  $scope.goHome = function($event) {
+  function goHome($event) {
     menu.selectPage(null, null);
     $location.path( '/' );
-  };
+  }
 
   function openPage() {
     $scope.closeMenu();
     mainContentArea.focus();
   }
+
+  function isSelected(page) {
+    return menu.isPageSelected(page);
+  }
+
+  function isSectionSelected(section) {
+    var selected = false;
+    var openedSection = menu.openedSection;
+    if(openedSection === section){
+      selected = true;
+    }
+    else if(section.children) {
+      section.children.forEach(function(childSection) {
+        if(childSection === openedSection){
+          selected = true;
+        }
+      });
+    }
+    return selected;
+  }
+
+  function isOpen(section) {
+    return menu.isSectionSelected(section);
+  }
+
+  function toggleOpen(section) {
+    menu.toggleSelectSection(section);
+  }
 }])
 
 .controller('HomeCtrl', [
@@ -350,6 +506,11 @@ function($rootScope, $scope, component, demos, $http, $templateCache, $q) {
 
 }])
 
+.filter('nospace', function () {
+  return function (value) {
+    return (!value) ? '' : value.replace(/ /g, '');
+  };
+})
 .filter('humanizeDoc', function() {
   return function(doc) {
     if (!doc) return;
diff --git a/docs/app/partials/getting-started.tmpl.html b/docs/app/partials/getting-started.tmpl.html
new file mode 100644
index 00000000000..f3527ac2eb5
--- /dev/null
+++ b/docs/app/partials/getting-started.tmpl.html
@@ -0,0 +1,41 @@
+<div ng-controller="GuideCtrl" layout="column" class="doc-content">
+  <md-content class="extraPad">
+    <p><em>New to Angular.js? Before getting into Angular Material, it might be helpful to <a href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank" title="Link opens in a new window">read about the framework</a>.</em></p>
+
+    <h2>How do I start?</h2>
+    <ul style="margin-bottom: 2em;">
+      <li><a href="http://codepen.io/collection/AxKKgY/" target="_blank" title="Link opens in a new window">Fork a Codepen</a></li>
+      <li><a href="https://github.com/angular/material-start" target="_blank" title="Link opens in a new window">Clone a Github Starter Project</a></li>
+    </ul>
+
+    <h3>Including Angular Material and its dependencies</h3>
+    <ul style="margin-bottom: 2em;">
+      <li><a href="https://github.com/angular/material#bower">Using Bower</a></li>
+      <li><a href="https://github.com/angular/material#cdn">Using a CDN</a> (example below)</li>
+    </ul>
+
+    <iframe height='280' scrolling='no' data-default-tab="html" src='//codepen.io/marcysutton/embed/OPbpKm?default-tab=html' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/marcysutton/pen/OPbpKm/'>Angular Material Dependencies</a> on <a href='http://codepen.io'>CodePen</a>.
+    </iframe>
+
+    <md-divider></md-divider>
+
+    <h2>Contributing to Angular Material</h2>
+    <ul style="margin-bottom: 2em;">
+      <li>To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.</li>
+      <li>Please read our <a href="https://github.com/angular/material#contributing">contributor guidelines</a>.</li>
+      <li>For problems,
+          <a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen" target="_blank">
+              search the issues
+          </a> and/or
+          <a href="https://github.com/angular/material/issues/new" target="_blank">
+              create a new issue
+          </a>.
+      </li>
+      <li>For questions,
+          <a href="https://groups.google.com/forum/#!forum/ngmaterial" target="_blank">
+              search the forum
+          </a> and/or post a new message.
+      </li>
+    </ul>
+  </md-content>
+</div>
diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
index 7b0861cd184..6a1803a4db7 100644
--- a/docs/app/partials/home.tmpl.html
+++ b/docs/app/partials/home.tmpl.html
@@ -1,5 +1,44 @@
 <div ng-controller="HomeCtrl" layout="column" class="doc-content">
-    <md-content class="extraPad" >
+    <md-content class="extraPad">
+        <p>The <strong>Angular Material</strong> project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.</p>
+
+        <p>Similar to the
+            <a href="http://www.polymer-project.org/">Polymer</a> project's
+            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a> collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.
+        </p>
+
+        <ul class="buckets" layout layout-align="center center" layout-wrap>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/getting-started">Getting Started</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/demo/">Demos</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/layout/">Customization</a>
+              </md-card-content>
+            </md-card>
+          </li>
+          <li flex="25" flex-md="50" flex-sm="50">
+            <md-card>
+              <md-card-content>
+                <a ng-href="#/api/">API Reference</a>
+              </md-card-content>
+            </md-card>
+          </li>
+        </ul>
+
+        <h2>What is Material Design?</h2>
         <p>
             <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a
             unified system of visual, motion, and interaction design that adapts across different devices and different
@@ -12,30 +51,7 @@
             <iframe width="560" height="315" title="Material Design" src="//www.youtube.com/embed/Q8TXgCzxEnw"
                     frameborder="0" allowfullscreen></iframe>
         </md-content>
-
-        <p>
-            The Angular Material Design project is a reference implementation effort similar to that provided in the
-            <a href="http://www.polymer-project.org/">Polymer</a> project's
-            <a href="http://www.polymer-project.org/docs/elements/paper-elements.html">Paper elements</a>
-            collection. This project provides a set of AngularJS UI elements that implement the material design system.
-
-        <h3>Useful Links:</h3>
-
         <ul>
-            <li>To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.</li>
-            <li>For problems,
-                <a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen" target="_blank">
-                    search the issues
-                </a> and/or
-                <a href="https://github.com/angular/material/issues/new" target="_blank">
-                    create a new issue
-                </a>.
-            </li>
-            <li>For questions,
-                <a href="https://groups.google.com/forum/#!forum/ngmaterial" target="_blank">
-                    search the forum
-                </a> and/or post a new message.
-            </li>
             <li>These docs were generated from source in the `master` branch:
                 <ul style="padding-top:5px;">
                     <li>
diff --git a/docs/app/partials/menu-link.tmpl.html b/docs/app/partials/menu-link.tmpl.html
new file mode 100644
index 00000000000..93bac37ffad
--- /dev/null
+++ b/docs/app/partials/menu-link.tmpl.html
@@ -0,0 +1,8 @@
+<md-button ng-class="{'active' : isSelected()}"
+  ng-href="#{{section.url}}">
+  {{section | humanizeDoc}}
+  <span class="visuallyhidden"
+    ng-if="isSelected()">
+    current page
+  </span>
+</md-button>
diff --git a/docs/app/partials/menu-toggle.tmpl.html b/docs/app/partials/menu-toggle.tmpl.html
new file mode 100644
index 00000000000..0a399b94eb0
--- /dev/null
+++ b/docs/app/partials/menu-toggle.tmpl.html
@@ -0,0 +1,18 @@
+<md-button class="md-button-toggle"
+  ng-click="toggle()"
+  aria-controls="docs-menu-{{section.name | nospace}}"
+  flex layout="row"
+  aria-expanded="{{isOpen()}}">
+  {{section.name}}
+  <span aria-hidden="true" class="md-toggle-icon"
+  ng-class="{'toggled' : isOpen()}"></span>
+  <span class="visuallyhidden">
+    Toggle {{isOpen()? 'expanded' : 'collapsed'}}
+  </span>
+</md-button>
+
+<ul ng-show="isOpen()" id="docs-menu-{{section.name | nospace}}" class="menu-toggle-list">
+  <li ng-repeat="page in section.pages">
+    <menu-link section="page"></menu-link>
+  </li>
+</ul>
diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html
index 1c74a5f2f03..f99ffec5ccc 100644
--- a/docs/config/template/index.template.html
+++ b/docs/config/template/index.template.html
@@ -24,7 +24,7 @@
 
     <md-toolbar>
       <h1 class="md-toolbar-tools">
-        <a href="" ng-click="goHome()" layout="row" flex>
+        <a ng-href="/" layout="row" flex>
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="
               width: 40px; height: 40px;">
             <path d="M 50 0 L 100 14 L 92 80 L 50 100 L 8 80 L 0 14 Z" fill="#b2b2b2"></path>
@@ -38,28 +38,24 @@ <h1 class="md-toolbar-tools">
       </h1>
     </md-toolbar>
 
-    <md-content flex>
-      <div ng-repeat="section in menu.sections">
-
-        <button class="menu-item menu-title md-menu-item"
-          ng-click="menu.toggleSelectSection(section)"
-          md-highlight="menu.isSectionSelected(section)"
-          md-ink-ripple="#bbb">
-          {{section.name}}
-        </button>
-
-        <a class="menu-item menu-sub-item md-menu-item"
-          ng-show="menu.isSectionSelected(section)"
-          ng-repeat="page in section.pages"
-          ng-href="#{{page.url}}"
-          md-highlight="menu.isPageSelected(section, page)"
-          md-ink-ripple="#bbb">
-          <span ng-bind="page | humanizeDoc"></span>
-        </a>
-
-      </div>
+    <md-content style="overflow: auto;">
+      <ul class="docs-menu">
+        <li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
+          <h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
+            {{section.name}}
+          </h2>
+          <menu-link section="section" ng-if="section.type === 'link'"></menu-link>
+
+          <menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
+
+          <ul ng-if="section.children" class="menu-nested-list">
+            <li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
+              <menu-toggle section="child"></menu-toggle>
+            </li>
+          </ul>
+        </li>
+      </ul>
     </md-content>
-
   </md-sidenav>
 
   <div layout="column" layout-fill tabIndex="-1" role="main">
@@ -72,11 +68,13 @@ <h1 class="md-toolbar-tools">
 
         <div layout="row" flex class="fill-height">
           <div class="md-toolbar-item md-breadcrumb">
-            <span hide-sm hide-md ng-if="menu.currentSection.name">{{menu.currentSection.name}}</span>
-            <span class="menu-separator-icon" ng-if="menu.currentPage" style="padding: 0 10px;" hide-sm hide-md>
-              <img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true">
+            <span ng-if="menu.currentPage.name !== menu.currentSection.name">
+              <span hide-sm hide-md>{{menu.currentSection.name}}</span>
+              <span class="menu-separator-icon" style="padding: 0 10px;" hide-sm hide-md>
+                <img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true">
+              </span>
             </span>
-            <span style="display: inline-block;" ng-bind="(menu.currentPage | humanizeDoc) || 'Angular Material'"></span>
+            <span style="display: inline-block;">{{(menu.currentPage | humanizeDoc) || 'Angular Material' }}</span>
           </div>
 
           <span flex></span> <!-- use up the empty space -->