relocate NavbarToggler

src/client/js/base.jsx

@@ -5,7 +5,6 @@ import Xss from '@commons/service/xss';
 
 import SearchTop from './components/Navbar/SearchTop';
 import GrowiNavbar from './components/Navbar/GrowiNavbar';
-import NavbarToggler from './components/Navbar/NavbarToggler';
 import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
@@ -40,7 +39,6 @@ logger.info('AppContainer has been initialized');
  */
 const componentMappings = {
   'grw-navbar': <GrowiNavbar />,
-  'grw-navbar-toggler': <NavbarToggler />,
 
   'grw-search-top': <SearchTop />,
 

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

@@ -68,9 +68,6 @@ class GrowiNavbar extends React.Component {
           </a>
         </div>
 
-        <ul className="navbar-nav d-md-none">
-          <li id="grw-navbar-toggler" className="nav-item"></li>
-        </ul>
         <div className="grw-app-title d-none d-md-block">
           {crowi.title}
         </div>

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

@@ -20,6 +20,8 @@ import BookmarkButton from '../BookmarkButton';
 
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
+import NavbarToggler from './NavbarToggler';
+
 
 // eslint-disable-next-line react/prop-types
 const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
@@ -79,16 +81,23 @@ const GrowiSubNavigation = (props) => {
   return (
     <div className={`grw-subnav d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact' : ''}`}>
 
-      {/* Page Path */}
-      <div>
-        { !isCompactMode && !isPageNotFound && !isPageForbidden && (
-          <div className="mb-2">
-            <TagLabels />
-          </div>
-        ) }
-        <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
+      {/* Left side */}
+      <div className="d-flex">
+        <div className="d-flex align-items-center border-right mr-3 pr-3">
+          <NavbarToggler />
+        </div>
+
+        <div>
+          { !isCompactMode && !isPageNotFound && !isPageForbidden && (
+            <div className="mb-2">
+              <TagLabels />
+            </div>
+          ) }
+          <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
+        </div>
       </div>
 
+      {/* Right side */}
       <div className="d-flex">
 
         {/* Buttons */}

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

@@ -15,15 +15,15 @@ const NavbarToggler = (props) => {
   };
 
   return (
-    <a
-      className="nav-link grw-navbar-toggler border-0 waves-effect waves-light"
+    <button
+      className="grw-navbar-toggler btn btn-secondary btn-xl"
       type="button"
       aria-expanded="false"
       aria-label="Toggle navigation"
       onClick={clickHandler}
     >
       <i className="icon-menu"></i>
-    </a>
+    </button>
   );
 
 };

src/client/styles/scss/_navbar.scss

@@ -11,11 +11,6 @@
     @include variable-font-size(24px);
   }
 
-  .grw-navbar-toggler {
-    padding: 0.5rem;
-    font-size: 1.5em;
-  }
-
   .grw-navbar-search {
     position: absolute;
     left: 50%;

src/client/styles/scss/_subnav.scss

@@ -1,6 +1,6 @@
 .grw-subnav {
   min-height: 115px;
-  padding: 10px 30px;
+  padding: 10px 15px;
 
   &:hover {
     .btn-copy,

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

@@ -16,12 +16,14 @@ $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 
 // override bootstrap variables
+$border-color: #444;
 $table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
 $table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 
+@import 'reboot-bootstrap-border-colors';
 @import 'reboot-bootstrap-tables';
 
 // List Group
@@ -174,6 +176,14 @@ ul.pagination {
   }
 }
 
+/*
+ * GROWI subnavigation
+ */
+.grw-navbar-toggler {
+  @extend .btn-dark;
+  color: #999;
+}
+
 /*
  * GROWI page list
  */

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

@@ -16,12 +16,14 @@ $color-tags: #949494 !default;
 $bgcolor-tags: #ebebeb !default;
 
 // override bootstrap variables
+$border-color: #dee2e6;
 $table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
 $table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 
+@import 'reboot-bootstrap-border-colors';
 @import 'reboot-bootstrap-tables';
 
 // List Group
@@ -130,6 +132,11 @@ $table-hover-bg: $bgcolor-table-hover;
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.grw-navbar-toggler {
+  @extend .btn-light;
+  color: #999;
+}
+
 /*
  * GROWI Sidebar
  */

src/client/styles/scss/theme/_reboot-bootstrap-border-colors.scss

@@ -0,0 +1,23 @@
+//
+// Border
+//
+
+.border {
+  border: $border-width solid $border-color !important;
+}
+
+.border-top {
+  border-top: $border-width solid $border-color !important;
+}
+
+.border-right {
+  border-right: $border-width solid $border-color !important;
+}
+
+.border-bottom {
+  border-bottom: $border-width solid $border-color !important;
+}
+
+.border-left {
+  border-left: $border-width solid $border-color !important;
+}