create component

src/client/js/app.jsx

@@ -35,6 +35,7 @@ import PageContainer from './services/PageContainer';
 import CommentContainer from './services/CommentContainer';
 import EditorContainer from './services/EditorContainer';
 import TagContainer from './services/TagContainer';
+import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
 
 import { appContainer, componentMappings } from './bootstrap';
 
@@ -100,6 +101,7 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'revision-path': <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />,
     'tag-label': <TagLabels />,
+    'grw-subnav': <GrowiSubNavigation />,
   });
 }
 

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+import RevisionPath from '../Page/RevisionPath';
+import PageContainer from '../../services/PageContainer';
+import TagLabels from '../Page/TagLabels';
+
+const GrowiSubNavigation = (props) => {
+  const { appContainer, pageContainer } = props;
+  const { isTrashPage } = pageContainer;
+
+
+  return (
+    <div className="d-flex align-items-center">
+
+      <div className="title-container mr-auto">
+        <h1>
+          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
+        </h1>
+        {/* TODO hide this component at forbidden page */}
+        {!isTrashPage && <TagLabels />}
+      </div>
+    </div>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const GrowiSubNavigationWrapper = (props) => {
+  return createSubscribedElement(GrowiSubNavigation, props, [AppContainer, PageContainer]);
+};
+
+
+GrowiSubNavigation.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default withTranslation()(GrowiSubNavigationWrapper);

src/client/js/services/PageContainer.js

@@ -365,4 +365,13 @@ export default class PageContainer extends Container {
 
   }
 
+  get isTrashPage() {
+    const path = this.state.path || '';
+    if (path.match(/^\/trash(\/.*)?$/)) {
+      return true;
+    }
+
+    return false;
+  }
+
 }

src/server/views/layout-growi/widget/header.html

@@ -1,6 +1,6 @@
 <header id="page-header">
 
-  <div class="d-flex align-items-center">
+  <div id="grw-subnav">
 
     <div class="title-container mr-auto">
       <h1 class="title" id="revision-path"></h1>