fix GrowiSubNavigation

src/client/js/app.jsx

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

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

@@ -1,64 +0,0 @@
-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';
-import LikeButton from '../LikeButton';
-import BookmarkButton from '../BookmarkButton';
-import ReducedPageCreator from './ReducedPageCreator';
-import ReducedRevisionAuthor from './ReducedRevisionAuthor';
-
-const GrowiCompactSubNavigation = (props) => {
-  const { appContainer, pageContainer } = props;
-  const {
-    createdAt, creator, updatedAt, revisionAuthor,
-  } = pageContainer.state;
-  return (
-    <div className="d-flex align-items-center fixed-top grw-compact-subnavbar px-3">
-
-      {/* Page Path */}
-      <div className="title-container mr-auto">
-        <h2>
-          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
-        </h2>
-        <TagLabels />
-      </div>
-
-      {/* Header Button */}
-      <div className="ml-1">
-        <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
-      </div>
-      <div>
-        <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
-      </div>
-
-      {/* Page Authors */}
-      <ul className="authors text-nowrap d-none d-lg-block">
-        {creator != null && <li><ReducedPageCreator creator={creator} createdAt={createdAt} /></li>}
-        {revisionAuthor != null && <li className="mt-1"><ReducedRevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
-      </ul>
-
-    </div>
-  );
-};
-
-/**
- * Wrapper component for using unstated
- */
-const GrowiCompactSubNavigationWrapper = (props) => {
-  return createSubscribedElement(GrowiCompactSubNavigation, props, [AppContainer, PageContainer]);
-};
-
-
-GrowiCompactSubNavigation.propTypes = {
-  t: PropTypes.func.isRequired, //  i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default withTranslation()(GrowiCompactSubNavigationWrapper);

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

@@ -13,6 +13,8 @@ import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
+import ReducedPageCreator from './ReducedPageCreator';
+import ReducedRevisionAuthor from './ReducedRevisionAuthor';
 
 const GrowiSubNavigation = (props) => {
   const isPageForbidden = document.querySelector('#grw-subnav').getAttribute('data-is-forbidden-page');
@@ -20,7 +22,10 @@ const GrowiSubNavigation = (props) => {
   const {
     path, createdAt, creator, updatedAt, revisionAuthor,
   } = pageContainer.state;
-
+  const isTopBarVisible = window.addEventListener('scroll', () => {
+    console.log(window.pageYOffset);
+    return window.pageYOffset > 122;
+  });
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
     return (
@@ -35,35 +40,60 @@ const GrowiSubNavigation = (props) => {
   }
 
   return (
-    <div className="d-flex align-items-center">
+    <div>
+      <div className="d-flex align-items-center fixed-top grw-compact-subnavbar px-3">
 
-      {/* Page Path */}
-      <div className="title-container mr-auto">
-        <h1>
-          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
-        </h1>
-        <TagLabels />
-      </div>
+        {/* Page Path */}
+        <div className="title-container mr-auto">
+          <h2>
+            <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
+          </h2>
+          <TagLabels />
+        </div>
+
+        {/* Header Button */}
+        <div className="ml-1">
+          <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
+        </div>
+        <div>
+          <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
+        </div>
+
+        {/* Page Authors */}
+        <ul className="authors text-nowrap d-none d-lg-block">
+          {creator != null && <li><ReducedPageCreator creator={creator} createdAt={createdAt} /></li>}
+          {revisionAuthor != null && <li className="mt-1"><ReducedRevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+        </ul>
 
-      {/* Header Button */}
-      <div className="ml-1">
-        <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
-      </div>
-      <div>
-        <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
       </div>
+      <div className="d-flex align-items-center">
+        {/* Page Path */}
+        <div className="title-container mr-auto">
+          <h1>
+            <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageContainer.state.pageId} pagePath={pageContainer.state.path} />
+          </h1>
+          <TagLabels />
+        </div>
 
-      {/* Page Authors */}
-      <ul className="authors text-nowrap d-none d-lg-block">
-        {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
-        {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
-      </ul>
+        {/* Header Button */}
+        <div className="ml-1">
+          <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />
+        </div>
+        <div>
+          <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />
+        </div>
 
+        {/* Page Authors */}
+        <ul className="authors text-nowrap d-none d-lg-block">
+          {creator != null && <li><PageCreator creator={creator} createdAt={createdAt} /></li>}
+          {revisionAuthor != null && <li className="mt-1"><RevisionAuthor revisionAuthor={revisionAuthor} updatedAt={updatedAt} /></li>}
+        </ul>
+      </div>
     </div>
   );
-
 };
 
+
 /**
  * Wrapper component for using unstated
  */

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

@@ -1,7 +1,7 @@
 <header id="page-header">
 
   <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
-  <div id="grw-compactsubnav" data-is-forbidden-page="{{ forbidden }}"></div>
+  <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
 
     {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
       {% if '/' === path.slice(-1) %}