relocate GlobalSearch in GrowiNavbar

src/client/js/base.jsx

@@ -3,7 +3,6 @@ import React from 'react';
 import loggerFactory from '@alias/logger';
 import Xss from '@commons/service/xss';
 
-import SearchTop from './components/Navbar/SearchTop';
 import GrowiNavbar from './components/Navbar/GrowiNavbar';
 import GrowiNavbarBottom from './components/Navbar/GrowiNavbarBottom';
 import Sidebar from './components/Sidebar';
@@ -42,8 +41,6 @@ const componentMappings = {
   'grw-navbar': <GrowiNavbar />,
   'grw-navbar-bottom-container': <GrowiNavbarBottom />,
 
-  'grw-search-top': <SearchTop />,
-
   'create-page-button-icon': <PageCreateButton isIcon />,
   'page-create-modal': <PageCreateModal />,
 

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

@@ -9,7 +9,7 @@ import NavigationContainer from '../../services/NavigationContainer';
 import SearchForm from '../SearchForm';
 
 
-class SearchTop extends React.Component {
+class GlobalSearch extends React.Component {
 
   constructor(props) {
     super(props);
@@ -51,23 +51,7 @@ class SearchTop extends React.Component {
     window.location.href = url.href;
   }
 
-  Root = ({ children }) => {
-    const { isDeviceSmallerThanMd: isCollapsed } = this.props.navigationContainer.state;
-
-    return isCollapsed
-      ? (
-        <div id="grw-search-top-collapse" className="collapse bg-dark p-3">
-          {children}
-        </div>
-      )
-      : (
-        <div className="grw-search-top-absolute position-absolute">
-          {children}
-        </div>
-      );
-  };
-
-  SearchTopForm = () => {
+  render() {
     const { t, appContainer } = this.props;
     const scopeLabel = this.state.isScopeChildren
       ? t('header_search_box.label.This tree')
@@ -105,16 +89,9 @@ class SearchTop extends React.Component {
     );
   }
 
-  render() {
-    const { Root, SearchTopForm } = this;
-    return (
-      <Root><SearchTopForm /></Root>
-    );
-  }
-
 }
 
-SearchTop.propTypes = {
+GlobalSearch.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
@@ -123,6 +100,6 @@ SearchTop.propTypes = {
 /**
  * Wrapper component for using unstated
  */
-const SearchTopWrapper = withUnstatedContainers(SearchTop, [AppContainer, NavigationContainer]);
+const GlobalSearchWrapper = withUnstatedContainers(GlobalSearch, [AppContainer, NavigationContainer]);
 
-export default withTranslation()(SearchTopWrapper);
+export default withTranslation()(GlobalSearchWrapper);

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

@@ -7,15 +7,22 @@ import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
 import AppContainer from '../../services/AppContainer';
 
+import GrowiLogo from '../GrowiLogo';
+
 import PageCreateButton from './PageCreateButton';
 import PersonalDropdown from './PersonalDropdown';
-import GrowiLogo from '../GrowiLogo';
+import GlobalSearch from './GlobalSearch';
 
 class GrowiNavbar extends React.Component {
 
   renderNavbarRight() {
     const { appContainer } = this.props;
-    const isReachable = appContainer.config.isSearchServiceReachable;
+    const { currentUser } = appContainer;
+
+    // render login button
+    if (currentUser == null) {
+      return <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>;
+    }
 
     return (
       <>
@@ -23,15 +30,6 @@ class GrowiNavbar extends React.Component {
           <PageCreateButton />
         </li>
 
-        {isReachable
-         && (
-         <li className="nav-item d-md-none">
-           <a type="button" className="nav-link px-4" data-target="#grw-search-top-collapse" data-toggle="collapse">
-             <i className="icon-magnifier mr-2"></i>
-           </a>
-         </li>
-         )}
-
         <li className="grw-personal-dropdown nav-item dropdown dropdown-toggle dropdown-toggle-no-caret">
           <PersonalDropdown />
         </li>
@@ -54,9 +52,9 @@ class GrowiNavbar extends React.Component {
   }
 
   render() {
-    const { appContainer } = this.props;
-    const { crowi } = appContainer.config;
-    const { currentUser } = appContainer;
+    const { appContainer, navigationContainer } = this.props;
+    const { crowi, isSearchServiceConfigured } = appContainer.config;
+    const { isDeviceSmallerThanMd } = navigationContainer.state;
 
     return (
       <>
@@ -75,10 +73,16 @@ class GrowiNavbar extends React.Component {
 
         {/* Navbar Right  */}
         <ul className="navbar-nav ml-auto">
-          {currentUser != null ? this.renderNavbarRight() : <li id="login-user" className="nav-item"><a className="nav-link" href="/login">Login</a></li>}
+          {this.renderNavbarRight()}
         </ul>
 
         {crowi.confidential != null && this.renderConfidential()}
+
+        { isSearchServiceConfigured && !isDeviceSmallerThanMd && (
+          <div className="grw-search-top grw-search-top-absolute position-absolute">
+            <GlobalSearch />
+          </div>
+        ) }
       </>
     );
   }

src/client/styles/scss/_navbar_kibela.scss

@@ -32,7 +32,7 @@
       }
     }
     @media screen and (max-width: 790px) {
-      .search-top {
+      .grw-search-top {
         display: none !important;
       }
       @media screen and (max-width: 540px) {

src/client/styles/scss/_search.scss

@@ -59,7 +59,7 @@
 }
 
 // input styles
-.search-top {
+.grw-search-top {
   .search-clear {
     top: 3px;
     right: 26px;
@@ -115,44 +115,42 @@
 }
 
 // layout
-.search-top {
-  .grw-search-top-absolute {
-    // centering on navbar
-    top: $grw-navbar-height / 2;
-    left: 50vw;
-    z-index: $zindex-fixed + 1;
-    transform: translate(-50%, -50%);
+.grw-search-top-absolute {
+  // 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;
+  .rbt-input.form-control {
+    width: 200px;
+    transition: 0.3s ease-out;
+
+    // focus
+    &.focus {
+      width: 300px;
+    }
 
+    @include media-breakpoint-up(md) {
+      width: 300px;
+    }
+    @include media-breakpoint-up(lg) {
       // focus
       &.focus {
-        width: 300px;
-      }
-
-      @include media-breakpoint-up(md) {
-        width: 300px;
-      }
-      @include media-breakpoint-up(lg) {
-        // focus
-        &.focus {
-          width: 400px;
-        }
-      }
-      @include media-breakpoint-up(xl) {
-        width: 350px;
-        // focus
-        &.focus {
-          width: 450px;
-        }
+        width: 400px;
       }
     }
-    .search-typeahead {
-      border-radius: 0 25px 25px 0;
+    @include media-breakpoint-up(xl) {
+      width: 350px;
+      // focus
+      &.focus {
+        width: 450px;
+      }
     }
   }
+  .search-typeahead {
+    border-radius: 0 25px 25px 0;
+  }
 }
 
 .search-result {

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

@@ -152,7 +152,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.search-top {
+.grw-search-top {
   .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
-  .search-top {
+  .grw-search-top {
     .btn-secondary.dropdown-toggle {
       color: $color-search;
     }

src/server/models/config.js

@@ -221,6 +221,7 @@ module.exports = function(crowi) {
       recentCreatedLimit: crowi.configManager.getConfig('crowi', 'customize:showRecentCreatedNumber'),
       isEnabledStaleNotification: crowi.configManager.getConfig('crowi', 'customize:isEnabledStaleNotification'),
       isAclEnabled: crowi.aclService.isAclEnabled(),
+      isSearchServiceConfigured: crowi.searchService.isConfigured,
       isSearchServiceReachable: crowi.searchService.isReachable,
       globalLang: crowi.configManager.getConfig('crowi', 'app:globalLang'),
     };

src/server/util/swigFunctions.js

@@ -113,11 +113,6 @@ module.exports = function(crowi, req, locals) {
     return crowi.passportService.getSamlMissingMandatoryConfigKeys();
   };
 
-  locals.isSearchServiceConfigured = function() {
-    const { searchService } = crowi;
-    return searchService.isConfigured;
-  };
-
   locals.isHackmdSetup = function() {
     return process.env.HACKMD_URI != null;
   };

src/server/views/layout/layout.html

@@ -75,11 +75,6 @@
 
   {% block layout_head_nav %}
     <nav id="grw-navbar" class="navbar grw-navbar navbar-expand navbar-dark sticky-top mb-0 px-0"></nav>
-
-    {# Search #}
-    {% if isSearchServiceConfigured() %}
-      <div id="grw-search-top" class="search-top" role="search"></div>
-    {% endif %}
   {% endblock  %} {# layout_head_nav #}
 
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}