refs 79820 80705

Add PageTree sidebar.

packages/app/resource/locales/ja_JP/translation.json

@@ -152,6 +152,7 @@
   "No bookmarks yet": "No bookmarks yet",
   "Recent Created": "最新の作成",
   "Recent Changes": "最新の変更",
+  "Page Tree": "ページツリー",
   "original_path":"元のパス",
   "new_path":"新しいパス",
   "duplicated_path":"重複したパス",

packages/app/src/components/Sidebar/PageTree.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+class PageTree extends React.Component {
+
+  static propTypes = {
+    t: PropTypes.func.isRequired, // i18next
+  };
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <>
+        <div className="grw-sidebar-content-header p-3 d-flex">
+          <h3 className="mb-0">{t('Page Tree')}</h3>
+        </div>
+        <div className="grw-sidebar-content-body p-3">
+          TBD
+        </div>
+      </>
+    );
+  }
+
+}
+
+export default withTranslation()(PageTree);

packages/app/src/components/Sidebar/SidebarContents.jsx

@@ -8,6 +8,7 @@ import NavigationContainer from '~/client/services/NavigationContainer';
 
 import RecentChanges from './RecentChanges';
 import CustomSidebar from './CustomSidebar';
+import PageTree from './PageTree';
 
 const SidebarContents = (props) => {
   const { navigationContainer, isSharedUser } = props;
@@ -21,6 +22,9 @@ const SidebarContents = (props) => {
     case 'recent':
       Contents = RecentChanges;
       break;
+    case 'tree':
+      Contents = PageTree;
+      break;
     default:
       Contents = CustomSidebar;
   }

packages/app/src/components/Sidebar/SidebarNav.jsx

@@ -66,6 +66,7 @@ class SidebarNav extends React.Component {
         <div className="grw-sidebar-nav-primary-container">
           {!isSharedUser && <PrimaryItem id="custom" label="Custom Sidebar" iconName="code" />}
           {!isSharedUser && <PrimaryItem id="recent" label="Recent Changes" iconName="update" />}
+          {!isSharedUser && <PrimaryItem id="tree" label="Page Tree" iconName="format_list_bulleted" />}
           {/* <PrimaryItem id="tag" label="Tags" iconName="icon-tag" /> */}
           {/* <PrimaryItem id="favorite" label="Favorite" iconName="icon-star" /> */}
         </div>