make SearchTop collapsible

src/client/js/components/Navbar/SearchTop.jsx

@@ -16,6 +16,7 @@ class SearchTop extends React.Component {
     this.state = {
       text: '',
       isScopeChildren: false,
+      isCollapsed: true,
     };
 
     this.onInputChange = this.onInputChange.bind(this);
@@ -24,10 +25,14 @@ class SearchTop extends React.Component {
     this.search = this.search.bind(this);
   }
 
-  componentDidMount() {
+  componentWillMount() {
+    this.initBreakpointEvents();
   }
 
-  componentWillUnmount() {
+  initBreakpointEvents() {
+    this.props.appContainer.addBreakpointListener('md', (mql) => {
+      this.setState({ isCollapsed: !mql.matches });
+    }, true);
   }
 
   onInputChange(text) {
@@ -56,7 +61,23 @@ class SearchTop extends React.Component {
     window.location.href = url.href;
   }
 
-  render() {
+  Root = ({ children }) => {
+    const { isCollapsed } = this.state;
+
+    return isCollapsed
+      ? (
+        <div id="grw-search-top-collapse" className="collapse bg-dark p-3">
+          {children}
+        </div>
+      )
+      : (
+        <div className="grw-search-top-fixed position-fixed">
+          {children}
+        </div>
+      );
+  };
+
+  SearchTopForm = () => {
     const { t, appContainer } = this.props;
     const scopeLabel = this.state.isScopeChildren
       ? t('header_search_box.label.This tree')
@@ -94,6 +115,13 @@ class SearchTop extends React.Component {
     );
   }
 
+  render() {
+    const { Root, SearchTopForm } = this;
+    return (
+      <Root><SearchTopForm /></Root>
+    );
+  }
+
 }
 
 SearchTop.propTypes = {

src/client/js/services/AppContainer.js

@@ -109,26 +109,10 @@ export default class AppContainer extends Container {
   }
 
   init() {
-    this.initBreakpointEvents();
     this.initColorScheme();
     this.initPlugins();
   }
 
-  initBreakpointEvents() {
-    this.addBreakpointEvents('sm', (mql) => {
-      this.setState({ breakpoint: mql.matches ? 'sm' : 'xs' });
-    }, true);
-    this.addBreakpointEvents('md', (mql) => {
-      this.setState({ breakpoint: mql.matches ? 'md' : 'sm' });
-    }, true);
-    this.addBreakpointEvents('lg', (mql) => {
-      this.setState({ breakpoint: mql.matches ? 'lg' : 'md' });
-    }, true);
-    this.addBreakpointEvents('xl', (mql) => {
-      this.setState({ breakpoint: mql.matches ? 'xl' : 'lg' });
-    }, true);
-  }
-
   async initColorScheme() {
     const switchStateByMediaQuery = (mql) => {
       const preferDarkMode = mql.matches;

src/client/styles/scss/_search.scss

@@ -102,8 +102,14 @@
 }
 
 // layout
-.grw-navbar-search {
-  .search-top {
+.search-top {
+  .grw-search-top-fixed {
+    // centering on navbar
+    top: $grw-navbar-height / 2;
+    left: 50vw;
+    z-index: $zindex-fixed + 1;
+    transform: translate(-50%, -50%);
+
     .rbt-input.form-control {
       width: 200px;
       transition: 0.3s ease-out;
@@ -120,14 +126,6 @@
   }
 }
 
-.grw-search-top-modal {
-  .search-top {
-    .rbt-input.form-control {
-      width: 100%;
-    }
-  }
-}
-
 .search-result {
   .search-result-list {
     position: sticky;

src/server/views/layout/layout.html

@@ -129,9 +129,7 @@
 
       {# Search #}
       {% if isSearchServiceConfigured() %}
-        <div id="grw-search-top-collapse" class="collapse bg-dark p-3">
-          <div id="grw-search-top" class="search-top" role="search"></div>
-        </div>
+        <div id="grw-search-top" class="search-top" role="search"></div>
       {% endif %}
 
       {% block layout_main %}{% endblock %}