feat(docs): enable search functionality (#2020)

Author: wesleygrimes

projects/ngrx.io/src/app/app.component.html

@@ -26,14 +26,16 @@
       <img *ngSwitchCase="true" src="assets/images/badge.svg" width="37" height="40" title="Home" alt="Home">
       <img *ngSwitchDefault src="assets/images/badge.svg" width="37" height="40" title="Home" alt="Home">
     </a>
-    <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
-    <!-- <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
+    <aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes">
+      <aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
+    </aio-top-menu>
+    <aio-search-box class="search-container" *ngIf="!isSideBySide" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
     <div class="toolbar-external-icons-container">
       <a  href="https://twitter.com/ngrx_io" title="Twitter">
         <img src="assets/images/logos/twitter-icon.svg"></a>
       <a  href="https://github.com/ngrx/platform" title="GitHub">
         <img src="assets/images/logos/github-icon.svg"></a>
-    </div> -->
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 

projects/ngrx.io/src/app/app.component.spec.ts

@@ -42,7 +42,8 @@ describe('AppComponent', () => {
         MockAioDocViewerComponent,
         MockAioDtComponent,
         MockAioLazyCeComponent,
-        MockAioFooterComponent
+        MockAioFooterComponent,
+        MockAioSearchBoxComponent
       ],
       imports: [
         MatProgressBarModule,
@@ -370,12 +371,6 @@ describe('AppComponent', () => {
         expect(component.showSearchResults).toBe(true);
       });
 
-      it('should show developer source view if the footer is clicked while holding the meta and alt keys', () => {
-        component.dtOn = false;
-        expect(component.onClick({ tagName: 'FOOTER'} as HTMLElement, 0, false, true, true)).toBeFalsy();
-        expect(component.dtOn).toBeTruthy();
-      });
-
       it('should return the result of handleAnchorClick when anchor is clicked', () => {
         const anchorElement: HTMLAnchorElement = document.createElement('a');
         spyOn(locationService, 'handleAnchorClick').and.returnValue(true);
@@ -618,3 +613,9 @@ class MockAioFooterComponent {
   @Input() nodes;
   @Input() versionInfo;
 }
+
+@Component({
+  selector: 'aio-search-box',
+  template: ''
+})
+class MockAioSearchBoxComponent {}

projects/ngrx.io/src/app/layout/top-menu/top-menu.component.ts

@@ -6,6 +6,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
   template: `
     <ul role="navigation">
       <li *ngFor="let node of nodes"><a class="nav-link" [href]="node.url" [title]="node.title">{{ node.title }}</a></li>
+      <li><ng-content></ng-content></li>
     </ul>`
 })
 export class TopMenuComponent {

projects/ngrx.io/src/styles/1-layouts/_top-menu.scss

@@ -189,7 +189,7 @@ aio-search-box.search-container {
       transition: width 0.4s ease-in-out;
 
       &:focus {
-        width: 50%;
+        width: 500px;
       }
     }
     @media (max-width: 480px) {