add drawer/expand controls to EditorNavbarBottom

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

@@ -19,7 +19,7 @@ const GrowiNavbarBottom = (props) => {
   }
 
   return (
-    <div className="d-md-none fixed-bottom">
+    <div className="d-md-none d-edit-none fixed-bottom">
 
       { isDeviceSmallerThanMd && (
         <div id="grw-global-search-collapse" className="grw-global-search collapse bg-dark">

src/client/js/components/PageEditor/EditorNavbarBottom.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import NavigationContainer from '../../services/NavigationContainer';
@@ -10,22 +10,47 @@ import OptionsSelector from './OptionsSelector';
 
 const EditorNavbarBottom = (props) => {
 
+  const [isExpanded, setExpanded] = useState(false);
+
   const {
     navigationContainer,
   } = props;
-  const { editorMode, isDeviceSmallerThanMd } = navigationContainer.state;
+  const { editorMode, isDrawerMode, isDeviceSmallerThanMd } = navigationContainer.state;
 
   const showOptionsSelector = editorMode !== 'hackmd';
 
   const additionalClasses = ['grw-editor-navbar-bottom'];
 
+  const renderDrawerButton = () => (
+    isDrawerMode && (
+      <button type="button" className="btn btn-outline-secondary border-0" onClick={() => navigationContainer.toggleDrawer()}>
+        <i className="icon-menu"></i>
+      </button>
+    )
+  );
+
+  // eslint-disable-next-line react/prop-types
+  const renderExpandButton = () => (
+    <div className="d-md-none ml-2">
+      <button
+        type="button"
+        className={`btn btn-outline-secondary btn-expand border-0 ${isExpanded ? 'expand' : ''}`}
+        onClick={() => setExpanded(!isExpanded)}
+      >
+        <i className="icon-arrow-up"></i>
+      </button>
+    </div>
+  );
+
   return (
-    <div className={`navbar navbar-expand border-top ${additionalClasses.join(' ')}`}>
+    <div className={`navbar navbar-expand border-top fixed-bottom px-2 ${additionalClasses.join(' ')}`}>
       <form className="form-inline mr-auto">
+        { renderDrawerButton() }
         { showOptionsSelector && <OptionsSelector /> }
       </form>
       <form className="form-inline">
         <SavePageControls />
+        { renderExpandButton() }
       </form>
     </div>
   );

src/client/styles/scss/_on-edit.scss

@@ -146,6 +146,17 @@ body.on-edit {
     .btn-submit {
       width: 100px;
     }
+
+    .btn-expand {
+      // rotate icon
+      i {
+        display: inline-block;
+        transition: transform 200ms;
+      }
+      &.expand i {
+        transform: rotate(-180deg);
+      }
+    }
   }
 
   /*********************