[Library & openaire-theme & Explore | explore-redesign]: Added search form in menu (navbar) in landing pages.

1. search.less: Added css for modifier .small-vertical for .input-wrapper of <search-input>.
2. layout.service.ts: Added hasMenuSearchBarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false), parsing and getter/setter methods.
3. navigationBar.module.ts: Imported SearchInputModule.
4. navigationBar.component.ts:
   a. Added searchMode: boolean = false; and hasSearchBar: boolean = false; (and other helpful fields)
   b. Subscribe to queryParams to hide search bar and reset keyword | Subscribe to layoutService.hasMenuSearchBar to check if search should be included in navbar or not.
   c. Added methods "openSearch()" to show the search form and "goTo()" to trigger the search action and navigate to the search page.
5. navigationBar.component.html: Added <div search-input> and search-icon button to show search bar | Added checks if searchMode is enabled (search form visible) or not.
6. app-routing.module.ts: In routes for landing pages added in data: hasMenuSearchBar: true.

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: [