set pageUser

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

@@ -9,10 +9,12 @@ import PagePathHierarchicalLink from '@commons/components/PagePathHierarchicalLi
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
+import NavigationContainer from '../../services/NavigationContainer';
 
 import RevisionPathControls from '../Page/RevisionPathControls';
 import BookmarkButton from '../BookmarkButton';
 import UserPicture from '../User/UserPicture';
+import DrawerToggler from './DrawerToggler';
 
 // eslint-disable-next-line react/prop-types
 const PagePathNav = ({ pageId, pagePath }) => {
@@ -34,44 +36,51 @@ const PagePathNav = ({ pageId, pagePath }) => {
 
 const GrowiSubNavigationForUserPage = (props) => {
   const pageUser = JSON.parse(document.querySelector('#grw-subnav-for-user-page').getAttribute('data-page-user'));
-  const { appContainer, pageContainer } = props;
+  const { appContainer, pageContainer, navigationContainer } = props;
+  const { isDrawerMode } = navigationContainer.state;
+
   const {
     pageId, path,
   } = pageContainer.state;
 
   const additionalClassNames = ['grw-subnavbar', 'grw-subnavbar-user-page'];
-  const layoutType = appContainer.getConfig().layoutType;
-
-  if (layoutType === 'growi') {
-    additionalClassNames.push('py-3');
-  }
 
   return (
-    <div className={`px-3 py-3 ${additionalClassNames.join(' ')}`}>
-      <PagePathNav pageId={pageId} pagePath={path} />
-
-      <div className="d-flex align-items-center justify-content-between">
-
-        <div className="users-info d-flex align-items-center d-edit-none">
-          <UserPicture user={pageUser} />
-
-          <div className="users-meta">
-            <h1>
-              {pageUser.name}
-            </h1>
-            <ul className="user-page-meta mt-1 mb-0">
-              <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
-              <li className="user-page-email">
-                <i className="icon-envelope mr-1"></i>
-                {pageUser.isEmailPublished ? pageUser.email : '*****'}
-              </li>
-              {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
-            </ul>
+    <div className={`d-flex align-items-center justify-content-between ${additionalClassNames.join(' ')}`}>
+
+
+      {/* Left side */}
+      <div className="d-flex">
+        { isDrawerMode && (
+        <div className="d-none d-md-flex align-items-center border-right mr-3 pr-3">
+          <DrawerToggler />
+        </div>
+        ) }
+        <div>
+          <PagePathNav pageId={pageId} pagePath={path} />
+
+          <div className="users-info d-flex align-items-center d-edit-none">
+            <UserPicture user={pageUser} />
+
+            <div className="users-meta">
+              <h1>
+                {pageUser.name}
+              </h1>
+              <ul className="user-page-meta mt-1 mb-0">
+                <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
+                <li className="user-page-email">
+                  <i className="icon-envelope mr-1"></i>
+                  {pageUser.isEmailPublished ? pageUser.email : '*****'}
+                </li>
+                {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
+              </ul>
+            </div>
           </div>
         </div>
-
-        <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
       </div>
+
+      {/* Right side */}
+      <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
     </div>
   );
 
@@ -80,13 +89,14 @@ const GrowiSubNavigationForUserPage = (props) => {
 /**
  * Wrapper component for using unstated
  */
-const GrowiSubNavigationForUserPageWrapper = withUnstatedContainers(GrowiSubNavigationForUserPage, [AppContainer, PageContainer]);
+const GrowiSubNavigationForUserPageWrapper = withUnstatedContainers(GrowiSubNavigationForUserPage, [AppContainer, PageContainer, NavigationContainer]);
 
 
 GrowiSubNavigationForUserPage.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
 export default withTranslation()(GrowiSubNavigationForUserPageWrapper);

src/client/js/services/PageContainer.js

@@ -60,6 +60,7 @@ export default class PageContainer extends Container {
       isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
       isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
       isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
+      pageUser: JSON.parse(mainContent.getAttribute('data-page-user')),
       tags: [],
       hasChildren: JSON.parse(mainContent.getAttribute('data-page-has-children')),
       templateTagData: mainContent.getAttribute('data-template-tags') || null,

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

@@ -7,7 +7,7 @@
 
 {% block content_header %}
   {% if pageUser %}
-    <div id="grw-subnav-for-user-page" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
+    <div id="grw-subnav-container" class="grw-subnav" data-page-user="{{ pageUser|json }}"></div>
   {% else %}
     {% parent %}
   {% endif %}

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

@@ -7,7 +7,7 @@
 
 {% block content_header %}
   {% if pageUser %}
-    <header id="grw-subnav-for-user-page" class="grw-subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
+    <header id="grw-subnav-container" class="grw-subnav grw-subnav-user-page" data-page-user="{{ pageUser|json }}"></header>
   {% else %}
     {% parent %}
   {% endif %}

src/server/views/widget/page_content.html

@@ -20,6 +20,7 @@
   data-page-creator="{% if page %}{{ page.creator|json }}{% endif %}"
   data-page-updated-at="{% if page %}{{ page.updatedAt|datetz('Y/m/d H:i:s') }}{% endif %}"
   data-page-has-children="{% if pages.length > 0 %}true{% else %}false{% endif %}"
+  data-page-user="{% if pageUser %}{{ pageUser|json }}{% endif %}"
   >
 {% else %}
 <div id="content-main" class="content-main"