add GlobalSearch to GrowiNavbarBottom

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

@@ -79,7 +79,7 @@ class GrowiNavbar extends React.Component {
         {crowi.confidential != null && this.renderConfidential()}
 
         { isSearchServiceConfigured && !isDeviceSmallerThanMd && (
-          <div className="grw-search-top grw-search-top-absolute position-absolute">
+          <div className="grw-global-search grw-global-search-top position-absolute">
             <GlobalSearch />
           </div>
         ) }

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

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import NavigationContainer from '../../services/NavigationContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
+import GlobalSearch from './GlobalSearch';
+
 const GrowiNavbarBottom = (props) => {
 
   const {
     navigationContainer,
   } = props;
-  const { isDrawerOpened } = navigationContainer.state;
+  const { isDrawerOpened, isDeviceSmallerThanMd } = navigationContainer.state;
 
   const additionalClasses = ['grw-navbar-bottom'];
   if (isDrawerOpened) {
@@ -17,24 +19,37 @@ const GrowiNavbarBottom = (props) => {
   }
 
   return (
-    <div className={`navbar navbar-expand navbar-dark bg-primary d-md-none fixed-bottom px-0 ${additionalClasses.join(' ')}`}>
-      <ul className="navbar-nav w-100">
-        <li className="nav-item">
-          <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.toggleDrawer()}>
-            <i className="icon-menu"></i>
-          </a>
-        </li>
-        <li className="nav-item mx-auto">
-          <a type="button" className="nav-link btn-lg">
-            <i className="icon-magnifier"></i>
-          </a>
-        </li>
-        <li className="nav-item">
-          <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.openPageCreateModal()}>
-            <i className="icon-pencil"></i>
-          </a>
-        </li>
-      </ul>
+    <div className="d-md-none fixed-bottom">
+
+      { isDeviceSmallerThanMd && (
+        <div id="grw-global-search-collapse" className="grw-global-search collapse bg-dark">
+          <div className="p-3">
+            <GlobalSearch />
+          </div>
+        </div>
+      ) }
+
+      <div className={`navbar navbar-expand navbar-dark bg-primary px-0 ${additionalClasses.join(' ')}`}>
+
+        <ul className="navbar-nav w-100">
+          <li className="nav-item">
+            <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.toggleDrawer()}>
+              <i className="icon-menu"></i>
+            </a>
+          </li>
+          <li className="nav-item mx-auto">
+            <a type="button" className="nav-link btn-lg" data-target="#grw-global-search-collapse" data-toggle="collapse">
+              <i className="icon-magnifier"></i>
+            </a>
+          </li>
+          <li className="nav-item">
+            <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.openPageCreateModal()}>
+              <i className="icon-pencil"></i>
+            </a>
+          </li>
+        </ul>
+      </div>
+
     </div>
   );
 };

src/client/styles/scss/_navbar_kibela.scss

@@ -31,13 +31,5 @@
         color: white;
       }
     }
-    @media screen and (max-width: 790px) {
-      .grw-search-top {
-        display: none !important;
-      }
-      @media screen and (max-width: 540px) {
-        // TODO responsive after implementation of Sidebar
-      }
-    }
   }
 }

src/client/styles/scss/_search.scss

@@ -59,7 +59,7 @@
 }
 
 // input styles
-.grw-search-top {
+.grw-global-search {
   .search-clear {
     top: 3px;
     right: 26px;
@@ -115,7 +115,7 @@
 }
 
 // layout
-.grw-search-top-absolute {
+.grw-global-search-top {
   // centering on navbar
   top: $grw-navbar-height / 2;
   left: 50vw;

src/client/styles/scss/theme/_apply-colors.scss

@@ -152,7 +152,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.grw-search-top {
+.grw-global-search {
   .btn-secondary.dropdown-toggle {
     @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
   }

src/client/styles/scss/theme/nature.scss

@@ -97,7 +97,7 @@ html[dark] {
   @import 'apply-colors-light';
 
   // Search Top
-  .grw-search-top {
+  .grw-global-search {
     .btn-secondary.dropdown-toggle {
       color: $color-search;
     }