dashboard/sharedComponents/sidebar/layout.service.ts

@@ -75,6 +75,11 @@ export class LayoutService {
   private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   /** Active sidebar Item*/
   private activeSidebarItemSubject: BehaviorSubject<SidebarItem> = new BehaviorSubject<SidebarItem>(null);
+  /**
+   *  Add hasMenuSearchBar: false/ nothing on data of route config, if the search bar in the menu should not appear, otherwise true.
+   */
+  private hasMenuSearchBarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
   private subscriptions: any[] = [];
 
   ngOnDestroy() {
@@ -166,6 +171,12 @@ export class LayoutService {
         } else {
           this.setActiveMenuItem('');
         }
+        if (data['hasMenuSearchBar'] !== undefined &&
+          data['hasMenuSearchBar'] === true) {
+          this.setHasMenuSearchBar(true);
+        } else {
+          this.setHasMenuSearchBar(false);
+        }
       }
     }));
     this.setObserver();
@@ -292,4 +303,12 @@ export class LayoutService {
   setActiveSidebarItem(value: SidebarItem) {
     this.activeSidebarItemSubject.next(value);
   }
+
+  get hasMenuSearchBar(): Observable<boolean> {
+    return this.hasMenuSearchBarSubject.asObservable();
+  }
+
+  setHasMenuSearchBar(value: boolean) {
+    this.hasMenuSearchBarSubject.next(value);
+  }
 }

sharedComponents/navigationBar.component.html

@@ -170,12 +170,28 @@
                 <ng-container *ngIf="!activeHeader.menuPosition || activeHeader.menuPosition === 'center'">
                   <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
                 </ng-container>
+                <div *ngIf="searchMode" #search_input search-input [(value)]="keyword" placeholder="Search by name, description, subject..."
+                     [searchInputClass]="'flat small-vertical'" (searchEmitter)="goTo()"
+                     class="uk-width-large@l uk-width-medium uk-width-xlarge@xl"></div>
               </div>
               <div class="uk-navbar-right">
                 <ng-container *ngIf="activeHeader.menuPosition === 'right'">
                   <ng-container *ngTemplateOutlet="mainMenu"></ng-container>
                 </ng-container>
-                <user-mini *ngIf="userMenu" [user]="user"
+
+                <div *ngIf="searchMode" class="uk-flex uk-flex-middle uk-margin-medium-right" (click)="searchMode = false">
+                  <div class="search-icon clickable">
+                    <icon name="close" [flex]="true" ratio="1.5" visuallyHidden="close search mode"></icon>
+                  </div>
+                </div>
+
+                <div *ngIf="!searchMode && hasSearchBar" class="uk-flex uk-flex-middle uk-margin-right" (click)="openSearch($event)">
+                  <div class="search-icon clickable">
+                    <icon name="search" [flex]="true" ratio="1" visuallyHidden="search"></icon>
+                  </div>
+                </div>
+
+                <user-mini *ngIf="!searchMode && userMenu" [user]="user"
                            [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
                            [cookieDomain]=properties.cookieDomain></user-mini>
                 <div class="uk-visible@m">
@@ -183,7 +199,7 @@
                 </div>
               </div>
               <ng-template #mainMenu>
-                <ul class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
+                <ul *ngIf="!searchMode" class="uk-navbar-nav" [class.uk-margin-right]="!userMenu">
                   <li class="uk-parent" *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
                     <a routerLink="/">Home</a>
                   </li>

sharedComponents/navigationBar.component.ts

@@ -1,4 +1,13 @@
-import {ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component, ElementRef,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit, QueryList,
+  SimpleChanges, ViewChild,
+  ViewChildren
+} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Session, User} from '../login/utils/helper.class';
 import {ConfigurationService} from '../utils/configuration/configuration.service';
@@ -9,6 +18,9 @@ import {HelpContentService} from '../services/help-content.service';
 import {properties} from "../../../environments/environment";
 import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service";
 import {NotificationConfiguration} from "../notifications/notifications-sidebar/notifications-sidebar.component";
+import {SearchInputComponent} from "./search-input/search-input.component";
+import {Filter} from "../searchPages/searchUtils/searchHelperClasses.class";
+import {RouterHelper} from "../utils/routerHelper.class";
 
 declare var UIkit;
 
@@ -57,6 +69,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
   subs: Subscription[] = [];
   showEntity = {};
   showPage = {};
+  public searchMode: boolean = false;
 
 	public additionalMenuItems: MenuItem[] = [];
 	public featuredMenuItems: MenuItem[] = [];
@@ -64,13 +77,28 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
   public isFeaturedMenuEnabled: boolean = false;
   public featuredAlignment: string = MenuAlignment.CENTER.valueOf();
 
+  public hasSearchBar: boolean = false;
+  public resultsQuickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {
+    filter: null,
+    selected: true,
+    filterId: "resultbestaccessright",
+    value: "Open Access"
+  };
+  @ViewChild('search_input') search_input: SearchInputComponent;
+  public routerHelper: RouterHelper = new RouterHelper();
+
   constructor(private router: Router,
               private  route: ActivatedRoute,
               private config: ConfigurationService,
 							private _helpContentService: HelpContentService,
-              private layoutService: LayoutService) {}
+              private layoutService: LayoutService,
+              private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
+    this.subs.push(this.route.queryParams.subscribe(params => {
+      this.searchMode = false;
+      this.keyword = "";
+    }));
     this.initialize();
   }
 
@@ -145,6 +173,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
     this.subs.push(this.layoutService.replaceHeader.subscribe(replaceHeader => {
       this.setHeader(replaceHeader);
     }));
+    this.subs.push(this.layoutService.hasMenuSearchBar.subscribe(hasSearchBar => {
+      this.hasSearchBar = hasSearchBar;
+    }));
   }
   
   setHeader(replaceHeader: boolean) {
@@ -204,4 +235,29 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
     //   return MenuItem.isTheActiveMenu(item, this.currentRoute, this.layoutService.activeMenuItem);
     // }
   }
+
+  openSearch(event) {
+    event.stopPropagation();
+    this.searchMode = true;
+    this.cdr.detectChanges();
+    this.search_input.input.focus(true);
+  }
+
+  goTo() {
+    let parameterNames = [];
+    let parameterValues = [];
+
+    if (this.resultsQuickFilter && this.resultsQuickFilter.selected) {
+      parameterNames.push(this.resultsQuickFilter.filterId);
+      parameterValues.push('"' + encodeURIComponent(this.resultsQuickFilter.value) + '"');
+    }
+
+    if (this.keyword.length > 0) {
+      parameterNames.push("fv0");
+      parameterValues.push(this.keyword);
+      parameterNames.push("f0");
+      parameterValues.push("q");
+    }
+    this.router.navigate([this.properties.searchLinkToAll], {queryParams: this.routerHelper.createQueryParams(parameterNames, parameterValues)});
+  }
 }

sharedComponents/navigationBar.module.ts

@@ -10,12 +10,13 @@ import { UserMiniModule} from '../login/userMiniModule.module';
 import {SearchBarModule} from "./searchBar/searchBar.module";
 import {HelpContentService} from '../services/help-content.service';
 import {IconsModule} from "../utils/icons/icons.module";
+import {SearchInputModule} from "./search-input/search-input.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
     RouterModule,
-    UserMiniModule, IconsModule,
+    UserMiniModule, IconsModule, SearchInputModule,
     // , SearchBarModule
   ],
   declarations: [