add MobileFooter component

src/client/js/base.jsx

@@ -12,6 +12,7 @@ import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import PageCreateButton from './components/Navbar/PageCreateButton';
 import PageCreateModal from './components/PageCreateModal';
+import MobileFooter from './components/MobileFooter';
 
 const logger = loggerFactory('growi:cli:app');
 
@@ -48,6 +49,7 @@ const componentMappings = {
   'grw-sidebar-wrapper': <Sidebar />,
 
   'staff-credit': <StaffCredit />,
+  'mobile-footer-container': <MobileFooter />,
 };
 
 export { appContainer, componentMappings };

src/client/js/components/MobileFooter.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import loggerFactory from '@alias/logger';
+
+import NavigationContainer from '../services/NavigationContainer';
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const logger = loggerFactory('growi:cli:MobileFooter');
+
+
+const MobileFooter = (props) => {
+
+  const {
+    navigationContainer,
+  } = props;
+  const { isDrawerOpen } = navigationContainer.state;
+
+  return (
+    <div className="navbar navbar-expand navbar-dark bg-primary d-md-none fixed-bottom px-0">
+      <ul className="navbar-nav w-100">
+        <li className="nav-item">
+          <a type="button" className="nav-link btn-lg"><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"><i className="icon-pencil"></i></a>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+MobileFooter.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+};
+
+export default withUnstatedContainers(MobileFooter, [NavigationContainer]);

src/server/views/layout-growi/base/layout.html

@@ -30,6 +30,7 @@
 </div><!-- /.main -->
 
 <footer class="footer">
+  {% include '../../widget/mobile-footer.html' %}
   {% include '../../widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/layout-kibela/base/layout.html

@@ -36,6 +36,7 @@
 <!-- /.container-fluid -->
 
 <footer class="footer">
+  {% include '../../widget/mobile-footer.html' %}
   {% include '../../widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/search.html

@@ -23,6 +23,7 @@
 </div><!-- /.container-fluid -->
 
 <footer class="footer">
+  {% include 'widget/mobile-footer.html' %}
   {% include 'widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/tags.html

@@ -18,6 +18,7 @@
 </div><!-- /.container-fluid -->
 
 <footer class="footer">
+  {% include 'widget/mobile-footer.html' %}
   {% include 'widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/widget/mobile-footer.html

@@ -0,0 +1 @@
+<div id="mobile-footer-container"></div>