Display a search for small screen

embark-ui/src/components/Layout.js

@@ -147,7 +147,7 @@ class Layout extends React.Component {
   renderRightNav() {
     return (
       <Nav className="ml-auto" navbar>
-        <NavItem className="d-sm-down-none">
+        <NavItem>
           <SearchBar loading={this.state.searchLoading} searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
         </NavItem>
         {this.renderSettings()}

embark-ui/src/components/SearchBar.css

@@ -4,6 +4,7 @@
   outline: none;
   box-shadow: none;
   width: 245px;
+  display: inline-block;
   border: 1px solid #c8ced3;
   border-right: 0;
 }
@@ -12,12 +13,18 @@
   border: 0;
 }
 
-#root .search-bar button {
+#root .search-bar .search-bar__button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   box-shadow: none;
 }
 
+@media(max-width:575px){
+  #root .search-bar .search-bar__button {
+    margin-bottom: 4px;
+  }
+}
+
 .search-bar .search-loading {
   margin-top: 16px;
 }

embark-ui/src/components/SearchBar.js

@@ -11,7 +11,8 @@ class SearchBar extends React.Component {
     super(props);
 
     this.state = {
-      searchValue: ''
+      searchValue: '',
+      showForm: false
     };
   }
 
@@ -23,26 +24,45 @@ class SearchBar extends React.Component {
 
   onSubmit(e) {
     e.preventDefault();
+    this.hideForm();
     this.props.searchSubmit(this.state.searchValue);
   }
 
+  hideForm() {
+    this.setState({showForm: false});
+  }
+
   onKeyPress(e) {
     if (e.key === 'Enter') {
       this.onSubmit(e);
     }
   }
 
+  revealForm() {
+    this.setState({showForm: true});
+  }
+
   render() {
     return (
       <Form inline className={classNames('search-bar', 'mr-2', {hidden: this.props.hidden})}>
         {!this.props.loading &&
           <React.Fragment>
-            <Input type="text" name="search-bar" placeholder="Search by Address / Txhash / Block"
-                  onChange={(e) => this.onChange(e)}
-                  value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)}/>
-            <Button color="secondary" onClick={(e) => this.onSubmit(e)}>
-              <FontAwesome name="search"/>
-            </Button>
+            <div className={classNames({'d-sm-down-none': !this.state.showForm})}>
+              <Input type="text" name="search-bar"
+                    placeholder="Search by Address / Txhash / Block"
+                    onChange={(e) => this.onChange(e)}
+                    value={this.state.searchValue}
+                    onBlur={() => this.hideForm()}
+                    onKeyPress={e => this.onKeyPress(e)}/>
+              <Button className='search-bar__button' color="secondary" onClick={(e) => this.onSubmit(e)}>
+                <FontAwesome name="search"/>
+              </Button>
+            </div>
+            {!this.state.showForm && <div className="d-block d-md-none">
+              <Button color="secondary" onClick={() => this.revealForm()}>
+                <FontAwesome name="search"/>
+              </Button>
+            </div>}
           </React.Fragment>
         }
         {this.props.loading &&