switch sidebar contents

src/client/js/components/Sidebar.jsx

@@ -18,6 +18,7 @@ import AppContainer from '../services/AppContainer';
 import GrowiLogo from './GrowiLogo';
 import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
+import CustomSidebar from './Sidebar/CustomSidebar';
 
 class Sidebar extends React.Component {
 
@@ -53,7 +54,7 @@ class Sidebar extends React.Component {
     // }
   }
 
-  GlobalNavigation = () => (
+  renderGlobalNavigation = () => (
     <>
       <div className="grw-logo">
         <a href="/"><GrowiLogo /></a>
@@ -65,9 +66,17 @@ class Sidebar extends React.Component {
     </>
   );
 
-  SidebarContents = () => (
-    <History></History>
-  );
+  renderSidebarContents = () => {
+    let contents = <CustomSidebar></CustomSidebar>;
+
+    switch (this.state.currentContentsId) {
+      case 'history':
+        contents = <History></History>;
+        break;
+    }
+
+    return contents;
+  }
 
   render() {
     return (
@@ -81,9 +90,9 @@ class Sidebar extends React.Component {
         })}
       >
         <LayoutManager
-          globalNavigation={this.GlobalNavigation}
+          globalNavigation={this.renderGlobalNavigation}
           productNavigation={() => null}
-          containerNavigation={this.SidebarContents}
+          containerNavigation={this.renderSidebarContents}
           experimental_hideNavVisuallyOnCollapse
           experimental_flyoutOnHover
           experimental_alternateFlyoutBehaviour

src/client/js/components/Sidebar/CustomSidebar.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import { JiraWordmark } from '@atlaskit/logo';
+
+import {
+  HeaderSection,
+  MenuSection,
+  Wordmark,
+} from '@atlaskit/navigation-next';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+import AppContainer from '../../services/AppContainer';
+
+class CustomSidebar extends React.Component {
+
+  static propTypes = {
+  };
+
+  state = {
+  };
+
+  render() {
+    return (
+      <>
+        <HeaderSection>
+          { () => (
+            <div className="grw-product-nav-header">
+              <Wordmark wordmark={JiraWordmark} />
+            </div>
+          ) }
+        </HeaderSection>
+        <MenuSection>
+          { () => (
+            <span>(TBD) CustomSidebar Contents</span>
+          ) }
+        </MenuSection>
+      </>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const CustomSidebarWrapper = (props) => {
+  return createSubscribedElement(CustomSidebar, props, [AppContainer]);
+};
+
+export default withTranslation()(CustomSidebarWrapper);

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -38,7 +38,7 @@ class SidebarNav extends React.Component {
             id: 'custom', icon: EditIcon, label: 'Custom Sidebar', onClick: () => this.itemSelectedHandler('custom'),
           },
           {
-            id: 'drawer', icon: TrayIcon, label: 'Drawer', onClick: () => this.itemSelectedHandler('drawer'),
+            id: 'history', icon: TrayIcon, label: 'History', onClick: () => this.itemSelectedHandler('history'),
           },
         ]}
         secondaryItems={[]}