fix(aio): group topbar items into a single sidenav node when narrow screen (#17001)

The `TopBarNarrow` now only shows a single top level container, "About Angular",
and the original `TopBar` items will be children of this container.

The `TopBarNarrow` styling is changed to match the rest of the `SideNav`.

aio/content/navigation.json

@@ -20,20 +20,21 @@
 
   "TopBarNarrow": [
     {
-      "url": "features",
-      "title": "Features"
-    },
-    {
-      "url": "resources",
-      "title": "Resources"
-    },
-    {
-      "url": "events",
-      "title": "Events"
-    },
-    {
-      "url": "docs",
-      "title": "Docs:"
+      "title": "About Angular",
+      "children": [
+        {
+          "url": "features",
+          "title": "Features"
+        },
+        {
+          "url": "resources",
+          "title": "Resources"
+        },
+        {
+          "url": "events",
+          "title": "Events"
+        }
+      ]
     }
   ],
 

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]="topMenuNarrowNodes" [currentNode]="currentNode"></aio-nav-menu>
+    <aio-nav-menu *ngIf="!isSideBySide" [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/styles/1-layouts/_sidenav.scss

@@ -8,12 +8,6 @@
   }
 }
 
-// SMALL SCREEN -> TOP NAV SLIDES INTO SIDENAV
-aio-nav-menu.top-menu .vertical-menu-item  {
-  background-color: $lightgray;
-  text-transform: uppercase;
-}
-
 md-sidenav.mat-sidenav.sidenav {
   position: fixed;
   bottom: 0;
@@ -24,7 +18,7 @@ md-sidenav.mat-sidenav.sidenav {
   box-shadow: 6px 0 6px rgba(0,0,0,0.10);
 
   &.collapsed {
-    padding-top: 32px;
+    padding-top: 64px;
   }
 }