Moving searchbox inside the top menu for styling, adding additionally…

… for mobile view
ngrx · Jul 16, 2019 · 777ef72 · 777ef72
1 parent fdd1a8f
commit 777ef72
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/projects/ngrx.io/src/app/app.component.html b/projects/ngrx.io/src/app/app.component.html
@@ -26,8 +26,10 @@
       <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>

diff --git a/projects/ngrx.io/src/app/app.component.spec.ts b/projects/ngrx.io/src/app/app.component.spec.ts
@@ -42,7 +42,8 @@ describe('AppComponent', () => {
         MockAioDocViewerComponent,
         MockAioDtComponent,
         MockAioLazyCeComponent,
-        MockAioFooterComponent
+        MockAioFooterComponent,
+        MockAioSearchBoxComponent
       ],
       imports: [
         MatProgressBarModule,
@@ -618,3 +619,9 @@ class MockAioFooterComponent {
   @Input() nodes;
   @Input() versionInfo;
 }
+
+@Component({
+  selector: 'aio-search-box',
+  template: ''
+})
+class MockAioSearchBoxComponent {}
diff --git a/projects/ngrx.io/src/app/layout/top-menu/top-menu.component.ts b/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 {

diff --git a/projects/ngrx.io/src/styles/1-layouts/_top-menu.scss b/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) {