open drawer with NavbarToggler

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

@@ -8,11 +8,14 @@ import AppContainer from '../../services/AppContainer';
 
 const NavbarToggler = (props) => {
 
-  // eslint-disable-next-line no-unused-vars
   const { appContainer } = props;
 
+  const clickHandler = () => {
+    appContainer.setState({ isDrawerOpened: true });
+  };
+
   return (
-    <button className="navbar-toggler grw-navbar-toggler border-0" type="button" aria-expanded="false" aria-label="Toggle navigation">
+    <button className="navbar-toggler grw-navbar-toggler border-0" type="button" aria-expanded="false" aria-label="Toggle navigation" onClick={clickHandler}>
       <i className="icon-menu"></i>
     </button>
   );

src/client/js/components/Sidebar.jsx

@@ -22,17 +22,17 @@ import CustomSidebar from './Sidebar/CustomSidebar';
 class Sidebar extends React.Component {
 
   static propTypes = {
+    appContainer: PropTypes.instanceOf(AppContainer).isRequired,
     navigationUIController: PropTypes.any.isRequired,
   };
 
   state = {
     currentContentsId: 'custom',
-    isDrawerOpen: false,
   };
 
-  openDrawer = () => this.setState({ isDrawerOpen: true });
+  openDrawer = () => this.props.appContainer.setState({ isDrawerOpened: true });
 
-  closeDrawer = () => this.setState({ isDrawerOpen: false });
+  closeDrawer = () => this.props.appContainer.setState({ isDrawerOpened: false });
 
   itemSelectedHandler = (contentsId) => {
     const { navigationUIController } = this.props;
@@ -47,16 +47,12 @@ class Sidebar extends React.Component {
       this.setState({ currentContentsId: contentsId });
       navigationUIController.expand();
     }
-
-    // if (contentsId === 'drawer') {
-    //   this.openDrawer();
-    // }
   }
 
   renderGlobalNavigation = () => (
     <>
       <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
-      <Drawer onClose={this.closeDrawer} isOpen={this.state.isDrawerOpen} width="wide">
+      <Drawer onClose={this.closeDrawer} isOpen={this.props.appContainer.state.isDrawerOpened}>
         <code>Drawer contents</code>
       </Drawer>
     </>

src/client/js/services/AppContainer.js

@@ -33,6 +33,7 @@ export default class AppContainer extends Container {
       editorMode: null,
       preferDarkModeByMediaQuery: false,
       preferDarkModeByUser: null,
+      isDrawerOpen: false,
     };
 
     const body = document.querySelector('body');

src/client/styles/scss/_layout.scss

@@ -94,6 +94,16 @@
   }
 }
 
+// Atlaskit Drawer
+.atlaskit-portal-container {
+  // override @atlaskit/navigation-next styles
+  div[class$='-Wrapper'],
+  .jyecer {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-fixed + 5;
+  }
+}
+
 #page-wrapper {
   margin-top: $grw-navbar-height;
 }