add create button

src/client/js/bootstrap.jsx

@@ -11,6 +11,7 @@ import StaffCredit from './components/StaffCredit/StaffCredit';
 
 import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
+import PageCreateButton from './components/Navbar/PageCreateButton';
 
 const logger = loggerFactory('growi:app');
 
@@ -44,6 +45,8 @@ const componentMappings = {
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'personal-dropdown': <PersonalDropdown />,
 
+  'create-page-button': <PageCreateButton />,
+
   'grw-sidebar-wrapper': <Sidebar />,
 
   'staff-credit': <StaffCredit />,

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+const PageCreateButton = (props) => {
+  const { t } = props;
+
+  return (
+    <a className="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
+      <i className="icon-pencil mr-2"></i>
+      <span>{ t('New') }</span>
+    </a>
+  );
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const PageCreateButtonWrapper = (props) => {
+  return createSubscribedElement(PageCreateButton, props, [AppContainer]);
+};
+
+
+PageCreateButton.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+};
+
+export default withTranslation()(PageCreateButtonWrapper);

src/server/views/layout/layout.html

@@ -107,12 +107,7 @@
       {% endif %}
 
       {% if user %}
-      <li class="nav-item d-none d-md-block">
-        <a class="nav-link create-page" href="#" data-target="#create-page" data-toggle="modal">
-          <i class="icon-pencil mr-2"></i>
-          <span>{{ t('New') }}</span>
-        </a>
-      </li>
+      <li id="create-page-button" class="nav-item d-none d-md-block"></li>
       <li class="nav-item d-none d-md-block">
         <a class="nav-link" href="https://docs.growi.org/" target="_blank">
           <i class="icon-question mr-2"></i><span class="mr-2">{{ t('Help') }}</span><span class="small"><i class="icon-share-alt"></i></span>