feat(aio): hard code a "Home" image link into the toolbar

Closes #15017

aio/src/app/app.component.html

@@ -1,6 +1,6 @@
 <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"></aio-top-menu>
+  <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
   <md-input-container >
     <input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
   </md-input-container>
@@ -10,7 +10,7 @@
 <md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
 
   <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
-    <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu>
+    <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
     <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
   </md-sidenav>
 

aio/src/app/app.component.ts

@@ -11,6 +11,7 @@ import { SearchService, QueryResults } from 'app/search/search.service';
 })
 export class AppComponent implements OnInit {
   readonly sideBySideWidth = 600;
+  readonly homeImageUrl = 'assets/images/logos/angular2/angular_solidBlack.svg';
 
   isHamburgerVisible = true; // always ... for now
   isSideBySide = false;

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

@@ -3,7 +3,9 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 
 @Component({
   selector: 'aio-top-menu',
-  template: `<span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`,
+  template: `
+    <span><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></span>
+    <span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`,
   styles: [`
     .fill-remaining-space {
       flex: 1 1 auto;
@@ -15,6 +17,13 @@ import { NavigationNode } from 'app/navigation/navigation.service';
       cursor: pointer;
     }
 
+    .nav-link.home img {
+      position: relative;
+      margin-top: -15px;
+      top: 12px;
+      height: 36px;
+    }
+
     @media (max-width: 700px) {
       .nav-link {
         margin-right: 8px;
@@ -33,4 +42,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
 export class TopMenuComponent {
   @Input()
   nodes: NavigationNode[];
+
+  @Input()
+  homeImageUrl: string;
 }

aio/src/content/navigation.json

@@ -1,9 +1,5 @@
 {
   "TopBar": [
-    {
-      "url": "/",
-      "title": "Home"
-    },
     {
       "url": "api",
       "title": "API"