feat(aio): show top-nav with same styling as side-nav when window is narrow

Fixes #15490

aio/src/app/app.component.html

@@ -1,6 +1,7 @@
 <md-toolbar color="primary" class="app-toolbar">
   <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
-  <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
+  <a class="nav-link home" href="/"><img [src]="homeImageUrl" title="Home" alt="Home"></a>
+  <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
   <aio-search-box class="search-container" #searchBox></aio-search-box>
   <span class="fill-remaining-space"></span>
 </md-toolbar>
@@ -8,7 +9,7 @@
 <md-sidenav-container class="sidenav-container">
 
   <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
-    <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu> 
+    <aio-nav-menu *ngIf="!isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
     <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
   </md-sidenav>
 

aio/src/app/app.component.ts

@@ -15,7 +15,11 @@ import { AutoScrollService } from 'app/shared/auto-scroll.service';
 })
 export class AppComponent implements OnInit {
   readonly sideBySideWidth = 600;
-  readonly homeImageUrl = 'assets/images/logos/standard/logo-nav.png';
+  get homeImageUrl() {
+     return this.isSideBySide ?
+                'assets/images/logos/standard/logo-nav.png' :
+                'assets/images/logos/standard/logo-nav-small.png';
+  }
 
   isHamburgerVisible = true; // always ... for now
   isSideBySide = false;

aio/src/app/layout/top-menu/top-menu.component.ts

@@ -5,8 +5,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
   selector: 'aio-top-menu',
   template: `
     <ul role="navigation">
-    <li><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></li>
-    <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li>
+      <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></li>
     </ul>`,
   styles: [`
     .fill-remaining-space {
@@ -44,7 +43,4 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 export class TopMenuComponent {
   @Input()
   nodes: NavigationNode[];
-
-  @Input()
-  homeImageUrl: string;
 }