organize sidebar nav and drawer

src/client/js/components/Sidebar.jsx

@@ -9,9 +9,12 @@ import {
   ThemeProvider, modeGenerator,
 } from '@atlaskit/navigation-next';
 
+import Drawer from '@atlaskit/drawer';
+
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
+import GrowiLogo from './GrowiLogo';
 import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
 
@@ -21,9 +24,32 @@ class Sidebar extends React.Component {
   };
 
   state = {
+    isDrawerOpen: false,
   };
 
-  renderSidebarContents = () => (
+  openDrawer = () => this.setState({ isDrawerOpen: true });
+
+  closeDrawer = () => this.setState({ isDrawerOpen: false });
+
+  itemSelectedHandler = (contentsId) => {
+    if (contentsId === 'drawer') {
+      this.openDrawer();
+    }
+  }
+
+  GlobalNavigation = () => (
+    <>
+      <div className="grw-logo">
+        <GrowiLogo />
+      </div>
+      <SidebarNav onItemSelected={this.itemSelectedHandler} />
+      <Drawer onClose={this.closeDrawer} isOpen={this.state.isDrawerOpen} width="wide">
+        <code>Drawer contents</code>
+      </Drawer>
+    </>
+  );
+
+  SidebarContents = () => (
     <History></History>
   );
 
@@ -40,9 +66,9 @@ class Sidebar extends React.Component {
       >
         <NavigationProvider>
           <LayoutManager
-            globalNavigation={SidebarNav}
+            globalNavigation={this.GlobalNavigation}
             productNavigation={() => null}
-            containerNavigation={this.renderSidebarContents}
+            containerNavigation={this.SidebarContents}
             experimental_flyoutOnHover
             experimental_alternateFlyoutBehaviour
             // experimental_fullWidthFlyout

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

@@ -16,7 +16,7 @@ import AppContainer from '../../services/AppContainer';
 
 class History extends React.Component {
 
-  propTypes = {
+  static propTypes = {
   };
 
   state = {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-// import PropTypes from 'prop-types';
+import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
@@ -9,47 +9,38 @@ import TrayIcon from '@atlaskit/icon/glyph/tray';
 import {
   GlobalNav,
 } from '@atlaskit/navigation-next';
-import Drawer from '@atlaskit/drawer';
 
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
-import GrowiLogo from '../GrowiLogo';
 
 class SidebarNav extends React.Component {
 
-  propTypes = {
-    isDrawerOpen: false,
+  static propTypes = {
+    onItemSelected: PropTypes.func,
   };
 
   state = {
-    // selectedContentsId: null,
   };
 
-  openDrawer = () => this.setState({ isDrawerOpen: true });
-
-  closeDrawer = () => this.setState({ isDrawerOpen: false });
+  itemSelectedHandler = (contentsId) => {
+    const { onItemSelected } = this.props;
+    if (onItemSelected != null) {
+      onItemSelected(contentsId);
+    }
+  }
 
   render() {
-    const { isDrawerOpen } = this.state;
     return (
-      <>
-        <div className="grw-logo">
-          <GrowiLogo />
-        </div>
-        <GlobalNav
-          primaryItems={[
-            { id: 'create', icon: EditIcon, label: 'Create' },
-            {
-              id: 'drawer', icon: TrayIcon, label: 'Drawer', onClick: this.openDrawer,
-            },
-          ]}
-          secondaryItems={[]}
-        />
-        <Drawer onClose={this.closeDrawer} isOpen={isDrawerOpen} width="wide">
-          <code>Drawer contents</code>
-        </Drawer>
-      </>
+      <GlobalNav
+        primaryItems={[
+          { id: 'create', icon: EditIcon, label: 'Create' },
+          {
+            id: 'drawer', icon: TrayIcon, label: 'Drawer', onClick: () => this.itemSelectedHandler('drawer'),
+          },
+        ]}
+        secondaryItems={[]}
+      />
     );
   }