From 0f6dc1400b3450b503db3f8cdbeefb741345d969 Mon Sep 17 00:00:00 2001
From: Alex Medesan <alex.medesan@gmail.com>
Date: Fri, 29 Jan 2021 15:24:13 +0200
Subject: [PATCH] implemented advanced search link in mobile menu

---
 .../theme/Navigation/Navigation.jsx           | 15 +++++-------
 .../theme/SearchWidget/SearchWidget.jsx       | 20 +++++++++++++++-
 theme/site/collections/menu.overrides         |  2 +-
 theme/site/elements/input.overrides           | 23 +++++++++++++++++++
 4 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/src/customizations/components/theme/Navigation/Navigation.jsx b/src/customizations/components/theme/Navigation/Navigation.jsx
index 48c6ebe..5bfaddc 100644
--- a/src/customizations/components/theme/Navigation/Navigation.jsx
+++ b/src/customizations/components/theme/Navigation/Navigation.jsx
@@ -255,11 +255,7 @@ class Navigation extends Component {
           stackable
           pointing
           secondary
-          className={
-            this.state.isMobileMenuOpen
-              ? 'open'
-              : 'large screen widescreen only'
-          }
+          className={this.state.isMobileMenuOpen ? 'open' : 'large screen only'}
         >
           <div className="navigation-links">
             {this.props.items.map((item) => (
@@ -281,7 +277,6 @@ class Navigation extends Component {
           </div>
 
           <div className="tools-wrapper">
-            {/* <LanguagesWidget></LanguagesWidget> */}
             <Popup
               on="click"
               className="large screen only custom-search-pop"
@@ -348,15 +343,17 @@ class Navigation extends Component {
             </div>
 
             <div className="tools-search-wrapper">
+              <div className="search">
+                <SearchWidget pathname={this.props.pathname} />
+              </div>
+
               {!this.props.token && (
                 <div className="tools">
                   <Anontools handleClick={this.closeMobileMenu} />
                 </div>
               )}
-              <div className="search">
-                <SearchWidget pathname={this.props.pathname} />
-              </div>
             </div>
+
             <div>
               <a
                 href="https://europa.eu/european-union/about-eu_en"
diff --git a/src/customizations/components/theme/SearchWidget/SearchWidget.jsx b/src/customizations/components/theme/SearchWidget/SearchWidget.jsx
index 94ef83b..859d8ce 100644
--- a/src/customizations/components/theme/SearchWidget/SearchWidget.jsx
+++ b/src/customizations/components/theme/SearchWidget/SearchWidget.jsx
@@ -18,7 +18,7 @@ import {
   Icon,
   Input,
   List,
-  Popup,
+  Popup
 } from 'semantic-ui-react';
 
 const messages = defineMessages({
@@ -288,6 +288,24 @@ class SearchWidget extends Component {
               </button>
             </Form.Field>
           </Form>
+
+          <div
+            className="eea-search-links mobile tablet computer only clearfix"
+            style={{ color: 'white' }}
+          >
+            <a href="http://search.apps.eea.europa.eu" className="pull-left">
+              <span>Advanced search</span>
+            </a>
+            <a
+              className="pull-right"
+              href="https://www.eea.europa.eu/help/glossary"
+              onClick={(evt) =>
+                this.onLinkClick(evt, 'https://www.eea.europa.eu/help/glossary')
+              }
+            >
+              A-Z Glossary
+            </a>
+          </div>
         </div>
       </>
     );
diff --git a/theme/site/collections/menu.overrides b/theme/site/collections/menu.overrides
index 2653343..eff055e 100644
--- a/theme/site/collections/menu.overrides
+++ b/theme/site/collections/menu.overrides
@@ -91,7 +91,7 @@
 
     .navigation-links {
       display: block !important;
-      margin-top: 4em;
+      margin-top: 6em;
     }
 
     .navigation-links a.item {
diff --git a/theme/site/elements/input.overrides b/theme/site/elements/input.overrides
index 66f8717..8fbbc90 100644
--- a/theme/site/elements/input.overrides
+++ b/theme/site/elements/input.overrides
@@ -69,6 +69,16 @@
 	}
 }
 
+@media only screen and (max-width: @mobileWidth) {
+  .header-wrapper .ui.pointing.secondary.stackable.open.menu {
+		.eea-search-links {
+			a {
+				color: @white;
+			}
+		}
+	}
+}
+
 .clearfix:after {
   display: table;
   clear: both;
@@ -86,6 +96,19 @@
   padding-left: 0.5em !important;
 }
 
+.searchbox {
+	.ui.accordion .title:not(.ui) {
+		padding: 0;
+	}
+	.ui.accordion:not(.styled) .title ~ .content.active {
+		position: absolute;
+		background: white;
+		width: 100%;
+		left: 0;
+		padding: 6px;
+	}
+}
+
 .ui.list > .item a.suggested-item {
 	font-size: 16px;
 	color: black;