change searchbar layout and use invenio-app-rdm searchbar

the searchbar is now on the top of the header, left of the language switch. the
new searchbar introduced a new feature, it could handle different indices like
all repository or communities. But the problem is where to place the new search
bar. for the moment the compromise is to put it on the top right.

this position may not be compatible with tugraz layout.

invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js

@@ -1,5 +1,9 @@
 import $ from "jquery";
 import "semantic-ui-css";
+import { MultipleOptionsSearchBar } from "@js/invenio_search_ui/components";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import ReactDOM from "react-dom";
+import React from "react";
 
 // called on document ready
 $(function () {
@@ -37,3 +41,14 @@ export function toggleVisibility(id) {
 }
 
 window.toggleVisibility = toggleVisibility;
+
+const headerSearchbar = document.getElementById("header-search-bar");
+const searchBarOptions = JSON.parse(headerSearchbar.dataset.options);
+
+ReactDOM.render(
+  <MultipleOptionsSearchBar
+    options={searchBarOptions}
+    placeholder={i18next.t("Search records...")}
+  />,
+  headerSearchbar
+);

invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html

@@ -79,23 +79,4 @@
     {%- include "invenio_theme/breadcrumbs.html" %}
   {%- endblock breadcrumbs %}
   #}
-
-  <div style="display: none;">
-    {% include "invenio_app_rdm/searchbar.html" %}
-  </div>
-
-  <div class="ui container">
-    <div class="ui center aligned grid">
-      <div class="sixteen wide column">
-        <form action="{{config.THEME_SEARCH_ENDPOINT}}" class="ui form" role="search">
-          <div class="ui fluid big action icon input">
-            <input type="text" name="q" autofocus="autofocus" placeholder="{{ _("Type and press enter to search") }}">
-            <button type="submit" class="ui icon search button">
-              <i class="icon search"></i>
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
 </div>

invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html

@@ -11,8 +11,11 @@
     <div class="short-menu-left">
       <div id="all-menu-top-left-item">
         <div class="short-menu-left-search">
-          {%- if config.I18N_LANGUAGES %}
-          <div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
+          <div style="display: inline-block;">
+            {% include "invenio_app_rdm/searchbar.html" %}
+          </div>
+
+          <div class="short-menu-left-lang">
             {%- for l in current_i18n.get_locales() %}
             {%- if current_i18n.language != l.language %}
             <a
@@ -20,21 +23,6 @@
             {%- endif %}
             {%- endfor %}
           </div>
-          {%- endif %}
-          <div class="search-icon-header">
-            <a href="{{url_for('invenio_search_ui.search')}}" class="no-decoration">
-              <svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-                xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1"
-                xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
-                viewBox="0 0 26.01515 26.01515">
-                <g stroke-miterlimit="10" transform="translate(1,1)">
-                  <circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
-                  <path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344">
-                  </path>
-                </g>
-              </svg>
-            </a>
-          </div>
         </div>
       </div>
     </div>