From b7a89cec59a657539e4bdfeb2bd9d303b65ecfdc Mon Sep 17 00:00:00 2001
From: Peter Bacon Darwin <pete@bacondarwin.com>
Date: Tue, 28 Mar 2017 10:12:28 +0100
Subject: [PATCH] feat(aio): show top-nav with same styling as side-nav when
 window is narrow

Fixes #15490
---
 aio/src/app/app.component.html                   |   5 +++--
 aio/src/app/app.component.ts                     |   6 +++++-
 .../app/layout/top-menu/top-menu.component.ts    |   6 +-----
 .../images/logos/standard/logo-nav-small.png     | Bin 0 -> 1871 bytes
 4 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 aio/src/assets/images/logos/standard/logo-nav-small.png

diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 6753e99794..7b9bb34a7a 100644
--- a/aio/src/app/app.component.html
+++ b/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>
 
diff --git a/aio/src/app/app.component.ts b/aio/src/app/app.component.ts
index 37db1424f4..a81725bfec 100644
--- a/aio/src/app/app.component.ts
+++ b/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;
diff --git a/aio/src/app/layout/top-menu/top-menu.component.ts b/aio/src/app/layout/top-menu/top-menu.component.ts
index 9fdfadfad6..0c0720ba32 100644
--- a/aio/src/app/layout/top-menu/top-menu.component.ts
+++ b/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;
 }
diff --git a/aio/src/assets/images/logos/standard/logo-nav-small.png b/aio/src/assets/images/logos/standard/logo-nav-small.png
new file mode 100644
index 0000000000000000000000000000000000000000..294e4c62b67ad14c95cc7a450274c05df6f08502
GIT binary patch
literal 1871
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
DH;-K~

literal 0
HcmV?d00001