From d605c104a8c3ce17741c8ce21615370798b9d0c1 Mon Sep 17 00:00:00 2001
From: Martin Staffa <mjstaffa@gmail.com>
Date: Wed, 1 Feb 2017 17:44:16 +0100
Subject: [PATCH 1/2] chore(docs-app): update the header style

Also adds a new fixed strip / bar about the AngularJS version

Closes #14963
Closes #15670
---
 docs/app/assets/css/angular-topnav.css        |   1 +
 docs/app/assets/css/docs.css                  | 103 ++++++++++-
 docs/app/e2e/api-docs/api-pages.scenario.js   |   4 +-
 docs/app/e2e/app.scenario.js                  |  20 ++-
 docs/config/services/deployments/debug.js     |   1 +
 docs/config/services/deployments/default.js   |   1 +
 docs/config/services/deployments/jquery.js    |   1 +
 .../config/services/deployments/production.js |   1 +
 .../templates/app/indexPage.template.html     | 169 +++++++++---------
 9 files changed, 196 insertions(+), 105 deletions(-)
 create mode 100644 docs/app/assets/css/angular-topnav.css

diff --git a/docs/app/assets/css/angular-topnav.css b/docs/app/assets/css/angular-topnav.css
new file mode 100644
index 000000000000..826e424295aa
--- /dev/null
+++ b/docs/app/assets/css/angular-topnav.css
@@ -0,0 +1 @@
+.visible-phone{display:none}.visible-desktop{display:block}.navbar{display:block}.navbar .container{padding:0 16px;width:auto}.navbar .brand{float:left;margin:8px 80px 0 8px;padding:0}.navbar .brand a{display:block;height:30px;margin:6px 0 5px 0;overflow:hidden;padding:0;width:117px}.navbar .nav{float:right}.navbar .nav .dropdown-toggle{color:rgba(255,255,255,0.87);font-size:16px;font-weight:300;line-height:56px;padding:0 24px;text-transform:uppercase;transition:all .3s}.navbar .nav .dropdown-toggle:hover,.navbar .nav .dropdown-toggle:active,.navbar .nav .dropdown-toggle:focus{background:#37474F;color:#fff}.navbar .nav .dropdown-menu{background:#37474F;border:none;border-radius:0;box-shadow:0 0 16px rgba(0,0,0,0.12),0 16px 16px rgba(0,0,0,0.24);color:#fff;left:auto;margin:0;padding:0;right:0}.navbar .nav .dropdown-menu:after,.navbar .nav .dropdown-menu:before{display:none}.navbar .nav .dropdown-menu li{border-bottom:1px solid rgba(38,50,56,0.56);box-sizing:border-box;line-height:48px}.navbar .nav .dropdown-menu li:last-child{border:none}.navbar .nav .dropdown-menu a{background:#37474F;color:#fff;font-weight:300;line-height:48px;padding:0 16px;transition:all .2s}.navbar .nav .dropdown-menu a:hover,.navbar .nav .dropdown-menu a:focus{background:#455A64}.navbar .navbar-search{left:200px;margin:0;position:absolute;right:440px;top:8px;width:auto}.navbar .navbar-search i{color:#546E7A;font-size:16px;left:12px;position:absolute;top:11px}.navbar .navbar-search .search-query{background:#37474F;border:none;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#546E7A;font-size:14px;height:40px;width:100%;padding:0 16px 0 32px;text-shadow:none;transition:all .3s}.navbar .navbar-search .search-query:-webkit-autofill,.navbar .navbar-search .search-query:-webkit-autofill:hover,.navbar .navbar-search .search-query:-webkit-autofill:focus{background-color:#fff;transition:background-color 5000s ease-in-out 0s;-webkit-text-fill-color:#455A64}.navbar .navbar-search .search-query:hover,.navbar .navbar-search .search-query:active,.navbar .navbar-search .search-query:focus{background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,0.24);color:#2196F3}.navbar .navbar-search .search-query::-webkit-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query::-moz-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-ms-input-placeholder{color:#546E7A}.navbar .navbar-search .search-query:-moz-placeholder{color:#546E7A}#navbar-main .navbar-inner{background:#263238;height:56px}#navbar-notice{z-index:1029;top:56px}#navbar-notice .navbar-inner{background:#ECEFF1;box-shadow:0 0 3px rgba(0,0,0,0.12),0 3px 3px rgba(0,0,0,0.24);height:auto}.site-notice{padding:4px 0;text-align:center;font-size:13px;margin:0}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.visible-phone{display:block}.visible-desktop{display:none}}@media handheld and (max-width: 800px), screen and (max-device-width: 800px), screen and (max-width: 800px){.homepage .container{padding:16px;width:auto}.homepage .span1{width:auto}.homepage .span2{width:auto}.homepage .span3{width:auto}.homepage .span4{width:auto}.homepage .span5{width:auto}.homepage .span6{width:auto}.homepage .span7{width:auto}.homepage .span8{width:auto}.homepage .span9{width:auto}.homepage .span10{width:auto}.homepage .navbar .container{padding:0 8px}.homepage #navbar-main .navbar-inner{height:40px}.homepage #navbar-main .brand{margin:6px 0 0 0}.homepage #navbar-main .brand a{margin:0}.homepage #navbar-main .nav{margin:0}.homepage #navbar-main .nav .dropdown-toggle{font-size:12px;line-height:40px;padding:0 8px}.homepage #navbar-main .dropdown-menu a{padding:0 8px}.homepage #navbar-main .navbar-search{background:#263238;border-bottom:1px solid #263238;left:0;right:0;top:100%}.homepage #navbar-main .navbar-search i{left:12px;top:7px}.homepage #navbar-main .navbar-search .search-query{border-radius:0;height:32px}.homepage #navbar-notice{top:40px}.homepage #navbar-notice .site-notice{font-size:11px}.homepage .hero{padding:80px 32px 32px 32px}.homepage .hero h2{background-size:230px 60px;height:60px;width:230px}}
diff --git a/docs/app/assets/css/docs.css b/docs/app/assets/css/docs.css
index c6d77c00ed96..77fcdbd400da 100644
--- a/docs/app/assets/css/docs.css
+++ b/docs/app/assets/css/docs.css
@@ -53,13 +53,13 @@ h1,h2,h3,h4,h5,h6 {
 }
 
 .header .brand {
-  padding-top: 6px;
   padding-bottom: 0px;
 }
 
 .header .brand img {
-  margin-top: 5px;
-  height: 30px;
+  margin-top: 0;
+  height: auto;
+  vertical-align: top;
 }
 
 .docs-search {
@@ -82,6 +82,11 @@ h1,h2,h3,h4,h5,h6 {
   margin-right: 10px;
 }
 
+.navbar .navbar-search i {
+  top: 13px;
+  font-size: 12px;
+}
+
 .docs-search > .search-query:focus {
   outline: 0;
 }
@@ -297,6 +302,7 @@ iframe.example {
 }
 
 .search-results-container {
+  position: relative;
   padding-bottom: 1em;
   border-top: 1px solid #111;
   background: #181818;
@@ -435,15 +441,17 @@ iframe.example {
   background: #f1f1f1;
 }
 
-.sup-header {
+#navbar-sub {
   padding-top: 10px;
   padding-bottom: 5px;
   background: rgba(245,245,245,0.88);
   box-shadow: 0 0 2px #999;
+  z-index: 1028;
+  top: 83px;
 }
 
 .main-body-grid {
-  margin-top: 120px;
+  margin-top: 144px;
   position: relative;
 }
 
@@ -454,7 +462,7 @@ iframe.example {
 
 .main-body-grid > .grid-left {
   position: fixed;
-  top: 120px;
+  top: 144px;
   bottom: 0;
   overflow: auto;
 }
@@ -827,3 +835,86 @@ ul.events > li {
 iframe[name="example-anchoringExample"] {
   height: 400px;
 }
+
+/*
+  angular-topnav.css and bootstrap overrides
+ */
+
+.navbar .navbar-inner .container {
+  padding: 0 16px;
+  width: auto;
+  height: auto;
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu {
+  position: absolute;
+  float: left;
+}
+
+.navbar-nav .open .dropdown-menu > li > a {
+  line-height: 48px;
+}
+
+#navbar-main .navbar-inner, #navbar-notice .navbar-inner {
+  box-shadow: none;
+}
+
+#navbar-sub .container {
+  max-width: 970px;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+  background-color: inherit;
+}
+
+@media handheld and (max-width:800px), screen and (max-device-width:800px), screen and (max-width:800px) {
+  .navbar {
+    min-height: auto;
+  }
+
+  .search-results-container {
+    top: 32px;
+    overflow: auto;
+    max-height: 85vh;
+    padding-bottom: 0;
+    position: static;
+  }
+
+  .search-close {
+    right: 1px;
+    margin-left: 0;
+    top: 41px;
+    padding: 5px 10px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    box-shadow: none;
+    width: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header {
+    padding: 0 8px;
+  }
+
+  .homepage #navbar-notice {
+    top: 72px;
+  }
+
+  #navbar-notice .navbar-inner {
+    box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 3px 3px rgba(0, 0, 0, .24)
+  }
+
+  #navbar-sub {
+    position: relative;
+    top: 17px;
+    margin-top: 80px;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+}
diff --git a/docs/app/e2e/api-docs/api-pages.scenario.js b/docs/app/e2e/api-docs/api-pages.scenario.js
index f6f296fd759a..f8fedb9ee7b5 100644
--- a/docs/app/e2e/api-docs/api-pages.scenario.js
+++ b/docs/app/e2e/api-docs/api-pages.scenario.js
@@ -18,8 +18,8 @@ describe('doc.angularjs.org', function() {
       var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
       ngBindLink.click();
 
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('ngClick');
     });
 
 
diff --git a/docs/app/e2e/app.scenario.js b/docs/app/e2e/app.scenario.js
index 4bacb00de97a..823f1408c2e4 100644
--- a/docs/app/e2e/app.scenario.js
+++ b/docs/app/e2e/app.scenario.js
@@ -44,30 +44,31 @@ describe('docs.angularjs.org', function() {
       var ngBindLink = element(by.css('.definition-table td a[href="api/ng/directive/ngClick"]'));
       ngBindLink.click();
 
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('ngClick');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('ngClick');
     });
 
 
 
     it('should be resilient to trailing slashes', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
     it('should be resilient to trailing "index"', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
     it('should be resilient to trailing "index/"', function() {
       browser.get('build/docs/index-production.html#!/api/ng/function/angular.noop/index/');
-      var pageBody = element(by.css('h1'));
-      expect(pageBody.getText()).toEqual('angular.noop');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('angular.noop');
     });
 
 
@@ -78,7 +79,8 @@ describe('docs.angularjs.org', function() {
 
     it('should display an error if the page does not exist', function() {
       browser.get('build/docs/index-production.html#!/api/does/not/exist');
-      expect(element(by.css('h1')).getText()).toBe('Oops!');
+      var mainHeader = element(by.css('.main-body h1 '));
+      expect(mainHeader.getText()).toEqual('Oops!');
     });
 
   });
diff --git a/docs/config/services/deployments/debug.js b/docs/config/services/deployments/debug.js
index 05cc1518626d..3581184c8e8e 100644
--- a/docs/config/services/deployments/debug.js
+++ b/docs/config/services/deployments/debug.js
@@ -32,6 +32,7 @@ module.exports = function debugDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]
diff --git a/docs/config/services/deployments/default.js b/docs/config/services/deployments/default.js
index 71b9c2f880d0..3abd0dd14c06 100644
--- a/docs/config/services/deployments/default.js
+++ b/docs/config/services/deployments/default.js
@@ -32,6 +32,7 @@ module.exports = function defaultDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]
diff --git a/docs/config/services/deployments/jquery.js b/docs/config/services/deployments/jquery.js
index e285abf7281c..4d4f64f6f416 100644
--- a/docs/config/services/deployments/jquery.js
+++ b/docs/config/services/deployments/jquery.js
@@ -36,6 +36,7 @@ module.exports = function jqueryDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]
diff --git a/docs/config/services/deployments/production.js b/docs/config/services/deployments/production.js
index 5487e86a0fcc..61d64b1f93d4 100644
--- a/docs/config/services/deployments/production.js
+++ b/docs/config/services/deployments/production.js
@@ -49,6 +49,7 @@ module.exports = function productionDeployment(getVersion) {
       'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.min.css',
       'components/open-sans-fontface-' + getVersion('open-sans-fontface') + '/open-sans.css',
       'css/prettify-theme.css',
+      'css/angular-topnav.css',
       'css/docs.css',
       'css/animations.css'
     ]
diff --git a/docs/config/templates/app/indexPage.template.html b/docs/config/templates/app/indexPage.template.html
index 75abb7190280..5dc8fe9a4b5d 100644
--- a/docs/config/templates/app/indexPage.template.html
+++ b/docs/config/templates/app/indexPage.template.html
@@ -68,101 +68,94 @@
     })();
   </script>
 </head>
-<body>
+<body class="homepage">
   <div id="wrapper">
-    <header scroll-y-offset-element class="header header-fixed">
-      <section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
-        <div class="container">
-          <div class="row">
-            <div class="col-md-9 header-branding">
-              <a class="brand navbar-brand" href="http://angularjs.org">
-                <img width="117" height="30" class="logo" alt="Link to AngularJS Homepage" ng-src="img/angularjs-for-header-only.svg">
-              </a>
-              <ul class="nav navbar-nav">
-                <li class="divider-vertical"></li>
-                <li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
-                    <li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
-                    <li><a href="tutorial">Tutorial</a></li>
-                    <li><a href="https://www.madewithangular.com/">Case Studies</a></li>
-                    <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
-                    <li><a href="misc/faq">FAQ</a></li>
-                  </ul>
-                </li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown active">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-book icon-white"></i> Develop <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><a href="tutorial">Tutorial</a></li>
-                    <li><a href="guide">Developer Guide</a></li>
-                    <li><a href="api">API Reference</a></li>
-                    <li><a href="error">Error Reference</a></li>
-                    <li><a href="misc/contribute">Contribute</a></li>
-                    <li><a href="http://code.angularjs.org/">Download</a></li>
-                  </ul>
-                </li>
-                <li class="divider-vertical"></li>
-                <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                    <i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
-                  </a>
-                  <ul class="dropdown-menu">
-                    <li><a href="http://blog.angularjs.org">Blog</a></li>
-                    <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
-                    <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
-                    <li class="divider"></li>
-                    <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
-                    <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
-                    <li class="divider"></li>
-                    <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
-                    <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
+    <header class="header" scroll-y-offset-element>
+      <nav id="navbar-main" class="navbar navbar-fixed-top">
+        <div class="navbar-inner" ng-controller="DocsSearchCtrl">
+          <div class="container">
+            <h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" src="img/angularjs-for-header-only.svg" alt="AngularJS"></a></h1>
+
+            <form class="navbar-search" ng-submit="submit()">
+              <i class="glyphicon glyphicon-search search-icon"></i>
+              <input type="text" name="as_q" class="search-query" placeholder="SEARCH"
+                 ng-focus="focus=true"
+                 ng-blur="focus=false"
+                 ng-change="search(q)"
+                 ng-model="q"
+                 docs-search-input
+                 autocomplete="off">
+            </form>
+
+            <ul class="nav navbar-nav">
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Learn</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li class="disabled"><a href="">Home</a></li>
+                  <li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
+                  <li><a href="http://angular.codeschool.com/">Free Course</a></li>
+                  <li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
+                  <li><a href="https://www.madewithangular.com/">Case Studies</a></li>
+                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
+                  <li><a href="http://docs.angularjs.org/misc/faq">FAQ</a></li>
+                </ul>
+              </li>
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Develop</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
+                  <li><a href="http://docs.angularjs.org/guide">Developer Guide</a></li>
+                  <li><a href="http://docs.angularjs.org/api">API Reference</a></li>
+                  <li><a href="http://docs.angularjs.org/misc/contribute">Contribute</a></li>
+                  <li><a href="http://code.angularjs.org/">Download</a></li>
+                </ul>
+              </li>
+              <li class="dropdown" uib-dropdown>
+                <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Discuss</a>
+                <ul class="dropdown-menu" uib-dropdown-menu>
+                  <li><a href="http://blog.angularjs.org">Blog</a></li>
+                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
+                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
+                  <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
+                  <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
+                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
+                  <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
+                </ul>
+              </li>
+            </ul>
+
+          </div>
+          <div class="search-results-container" ng-show="hasResults">
+            <div class="container">
+              <div class="search-results-frame">
+                <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
+                  <h4 class="search-results-group-heading">{{ key }}</h4>
+                  <ul class="search-results">
+                    <li ng-repeat="item in value" class="search-result"><a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a></li>
                   </ul>
-                </li>
-                <li class="divider-vertical"></li>
-              </ul>
+                </div>
+              </div>
+              <a href="" ng-click="hideResults()" class="search-close">
+                <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
+              </a>
             </div>
-            <form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
-              <span class="glyphicon glyphicon-search search-icon"></span>
-              <input type="text"
-                     name="as_q"
-                     class="search-query"
-                     placeholder="Click or press / to search"
-                     ng-focus="focus=true"
-                     ng-blur="focus=false"
-                     ng-change="search(q)"
-                     ng-model="q"
-                     docs-search-input
-                     autocomplete="off" />
-            </form>
           </div>
         </div>
-        <div class="search-results-container" ng-show="hasResults">
+      </nav>
+      <nav id="navbar-notice" class="navbar navbar-fixed-top">
+        <div class="navbar-inner">
           <div class="container">
-            <div class="search-results-frame">
-              <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
-                <h4 class="search-results-group-heading">{{ key }}</h4>
-                <ul class="search-results">
-                  <!-- Do not insert a line break between li and a. Chrome will insert an actual line-break, which breaks the list item view.
-                  TODO: use a html minifier instead -->
-                  <li ng-repeat="item in value" class="search-result"><a ng-click="hideResults()" ng-href="{{ item.path }}">{{ item.name }}</a></li>
-                </ul>
-              </div>
-            </div>
-            <a href="" ng-click="hideResults()" class="search-close">
-              <span class="glyphicon glyphicon-remove search-close-icon"></span> Close
-            </a>
+            <p class="site-notice visible-phone">
+              This site refers to AngularJS (v1.x). <a href="https://angular.io/">Go to the latest Angular</a>.
+            </p>
+            <p class="site-notice visible-desktop">
+              This site and all of its contents are referring to AngularJS (version 1.x),
+              if you are looking for the latest Angular, please visit <a href="https://angular.io/">angular.io</a>.
+            </p>
           </div>
         </div>
-      </section>
-      <section class="sup-header">
+      </nav>
+      <nav id="navbar-sub" class="sup-header navbar navbar-fixed-top">
         <div class="container main-grid main-header-grid">
           <div class="grid-left">
             <version-picker></version-picker>
@@ -176,7 +169,7 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
             </ul>
           </div>
         </div>
-      </section>
+      </nav>
     </header>
 
     <section role="main" class="container main-body">

From f4791a0fdaaefe334f6961f5b075894f37506903 Mon Sep 17 00:00:00 2001
From: Martin Staffa <mjstaffa@gmail.com>
Date: Thu, 2 Feb 2017 12:54:51 +0100
Subject: [PATCH 2/2] chore(docs-app): update links in header menu

They are now in the same order as angularjs.org

Closes #14351
---
 .../templates/app/indexPage.template.html     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/config/templates/app/indexPage.template.html b/docs/config/templates/app/indexPage.template.html
index 5dc8fe9a4b5d..57eb4f64cd96 100644
--- a/docs/config/templates/app/indexPage.template.html
+++ b/docs/config/templates/app/indexPage.template.html
@@ -91,22 +91,22 @@ <h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" sr
               <li class="dropdown" uib-dropdown>
                 <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Learn</a>
                 <ul class="dropdown-menu" uib-dropdown-menu>
-                  <li class="disabled"><a href="">Home</a></li>
+                  <li><a href="tutorial">Tutorial</a></li>
+                  <li><a href="misc/faq">FAQ</a></li>
                   <li><a href="https://www.youtube.com/user/angularjs">Videos</a></li>
                   <li><a href="http://angular.codeschool.com/">Free Course</a></li>
-                  <li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
                   <li><a href="https://www.madewithangular.com/">Case Studies</a></li>
-                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
-                  <li><a href="http://docs.angularjs.org/misc/faq">FAQ</a></li>
                 </ul>
               </li>
               <li class="dropdown" uib-dropdown>
                 <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Develop</a>
                 <ul class="dropdown-menu" uib-dropdown-menu>
-                  <li><a href="http://docs.angularjs.org/tutorial">Tutorial</a></li>
-                  <li><a href="http://docs.angularjs.org/guide">Developer Guide</a></li>
-                  <li><a href="http://docs.angularjs.org/api">API Reference</a></li>
-                  <li><a href="http://docs.angularjs.org/misc/contribute">Contribute</a></li>
+                  <li><a href="guide">Developer Guide</a></li>
+                  <li><a href="api">API Reference</a></li>
+                  <li><a href="error">Error Reference</a></li>
+                  <li><a href="misc/contribute">Contribute</a></li>
+                  <li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
+                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
                   <li><a href="http://code.angularjs.org/">Download</a></li>
                 </ul>
               </li>
@@ -114,12 +114,12 @@ <h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" sr
                 <a href="#" class="dropdown-toggle" uib-dropdown-toggle>Discuss</a>
                 <ul class="dropdown-menu" uib-dropdown-menu>
                   <li><a href="http://blog.angularjs.org">Blog</a></li>
-                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
-                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
-                  <li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
+                  <li><a href="https://twitter.com/angular">Twitter</a></li>
                   <li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
-                  <li><a href="https://github.com/angular/angular.js">GitHub</a></li>
-                  <li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
+                  <li><a href="https://github.com/angular/angular.js/issues">Feature &amp; Bug Tracker</a></li>
+                  <li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
+                  <li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">IRC</a></li>
+                  <li><a href="https://gitter.im/angular/angular.js">Gitter</a></li>
                 </ul>
               </li>
             </ul>