fix(aio): use a special version of the TopBar if the screen is narrow

If there is a `TopBarNarrow` nav view then use this when the screen is narrow.
Otherwise just use the normal `TopBar`.

This commit also creates such a narrow topbar view where the "Docs" item is
in a different position

Closes #16940

aio/content/navigation.json

@@ -18,6 +18,25 @@
     }
   ],
 
+  "TopBarNarrow": [
+    {
+      "url": "features",
+      "title": "Features"
+    },
+    {
+      "url": "resources",
+      "title": "Resources"
+    },
+    {
+      "url": "events",
+      "title": "Events"
+    },
+    {
+      "url": "docs",
+      "title": "Docs:"
+    }
+  ],
+
   "SideNav": [
     {
       "url": "docs",

aio/src/app/app.component.html

@@ -17,7 +17,7 @@
 <md-sidenav-container class="sidenav-container" [class.starting]="isStarting" role="main">
 
   <md-sidenav [ngClass]="{'collapsed': !isSideBySide }" #sidenav class="sidenav" [opened]="isOpened" [mode]="mode" (open)="updateHostClasses()" (close)="updateHostClasses()">
-    <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNodes" [currentNode]="currentNode"></aio-nav-menu>
+    <aio-nav-menu *ngIf="!isSideBySide" class="top-menu" [nodes]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu>
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
 
     <div class="doc-version" title="Angular docs version {{currentDocVersion?.title}}">

aio/src/app/app.component.ts

@@ -64,6 +64,7 @@ export class AppComponent implements OnInit {
   private sideBySideWidth = 1032;
   sideNavNodes: NavigationNode[];
   topMenuNodes: NavigationNode[];
+  topMenuNarrowNodes: NavigationNode[];
   tocMaxHeight: string;
   private tocMaxHeightOffset = 0;
   versionInfo: VersionInfo;
@@ -161,6 +162,7 @@ export class AppComponent implements OnInit {
       this.footerNodes  = views['Footer']  || [];
       this.sideNavNodes = views['SideNav'] || [];
       this.topMenuNodes = views['TopBar']  || [];
+      this.topMenuNarrowNodes = views['TopBarNarrow'] || this.topMenuNodes;
     });
 
     this.navigationService.versionInfo.subscribe( vi => this.versionInfo = vi );