impl drawer behavior

src/client/js/bootstrap.jsx

@@ -44,7 +44,7 @@ const componentMappings = {
   'search-sidebar': <HeaderSearchBox crowi={appContainer} />,
   'personal-dropdown': <PersonalDropdown />,
 
-  'grw-sidebar': <Sidebar />,
+  'grw-sidebar-wrapper': <Sidebar />,
 
   'staff-credit': <StaffCredit />,
 };

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

@@ -11,7 +11,7 @@ const NavbarToggler = (props) => {
   const { appContainer } = props;
 
   const clickHandler = () => {
-    appContainer.setState({ isDrawerOpened: true });
+    appContainer.toggleDrawer();
   };
 
   return (

src/client/js/components/Sidebar.jsx

@@ -10,8 +10,6 @@ import {
   ThemeProvider, modeGenerator,
 } from '@atlaskit/navigation-next';
 
-import Drawer from '@atlaskit/drawer';
-
 import { createSubscribedElement } from './UnstatedUtils';
 import AppContainer from '../services/AppContainer';
 
@@ -30,10 +28,6 @@ class Sidebar extends React.Component {
     currentContentsId: 'custom',
   };
 
-  openDrawer = () => this.props.appContainer.setState({ isDrawerOpened: true });
-
-  closeDrawer = () => this.props.appContainer.setState({ isDrawerOpened: false });
-
   itemSelectedHandler = (contentsId) => {
     const { navigationUIController } = this.props;
     const { currentContentsId } = this.state;
@@ -50,12 +44,7 @@ class Sidebar extends React.Component {
   }
 
   renderGlobalNavigation = () => (
-    <>
-      <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
-      <Drawer onClose={this.closeDrawer} isOpen={this.props.appContainer.state.isDrawerOpened}>
-        <code>Drawer contents</code>
-      </Drawer>
-    </>
+    <SidebarNav currentContentsId={this.state.currentContentsId} onItemSelected={this.itemSelectedHandler} />
   );
 
   renderSidebarContents = () => {
@@ -71,30 +60,34 @@ class Sidebar extends React.Component {
   }
 
   render() {
+    const { isDrawerOpened } = this.props.appContainer.state;
+
     return (
-      <ThemeProvider
-        theme={theme => ({
-          ...theme,
-          context: 'product',
-          mode: modeGenerator({
-            product: { text: '#ffffff', background: '#334455' },
-          }),
-        })}
-      >
-        <LayoutManager
-          globalNavigation={this.renderGlobalNavigation}
-          productNavigation={() => null}
-          containerNavigation={this.renderSidebarContents}
-          experimental_hideNavVisuallyOnCollapse
-          experimental_flyoutOnHover
-          experimental_alternateFlyoutBehaviour
-          // experimental_fullWidthFlyout
-          shouldHideGlobalNavShadow
-          showContextualNavigation
-          topOffset={50}
+      <div className={`grw-sidebar ${isDrawerOpened ? 'open' : ''}`}>
+        <ThemeProvider
+          theme={theme => ({
+            ...theme,
+            context: 'product',
+            mode: modeGenerator({
+              product: { text: '#ffffff', background: '#334455' },
+            }),
+          })}
         >
-        </LayoutManager>
-      </ThemeProvider>
+          <LayoutManager
+            globalNavigation={this.renderGlobalNavigation}
+            productNavigation={() => null}
+            containerNavigation={this.renderSidebarContents}
+            experimental_hideNavVisuallyOnCollapse
+            experimental_flyoutOnHover
+            experimental_alternateFlyoutBehaviour
+            // experimental_fullWidthFlyout
+            shouldHideGlobalNavShadow
+            showContextualNavigation
+            topOffset={50}
+          >
+          </LayoutManager>
+        </ThemeProvider>
+      </div>
     );
   }
 

src/client/js/services/AppContainer.js

@@ -33,7 +33,7 @@ export default class AppContainer extends Container {
       editorMode: null,
       preferDarkModeByMediaQuery: false,
       preferDarkModeByUser: null,
-      isDrawerOpen: false,
+      isDrawerOpened: false,
     };
 
     const body = document.querySelector('body');
@@ -324,6 +324,11 @@ export default class AppContainer extends Container {
     return users;
   }
 
+  toggleDrawer() {
+    const { isDrawerOpened } = this.state;
+    this.setState({ isDrawerOpened: !isDrawerOpened });
+  }
+
   launchHandsontableModal(componentKind, beginLineNumber, endLineNumber) {
     let targetComponent;
     switch (componentKind) {

src/client/styles/scss/_sidebar.scss

@@ -1,19 +1,16 @@
 .grw-sidebar {
-  // @include media-breakpoint-down(xs) {
-  //   position: fixed;
-  // }
-
   .ak-navigation-resize-button {
     top: calc(50vh - 20px);
   }
 
   // override @atlaskit/navigation-next styles
+  div[data-testid='GlobalNavigation'] {
+    width: $grw-sidebar-nav-width;
+  }
   div[class$='-NavigationContainer'] {
     // Adjust to be on top of the growi subnavigation
     z-index: $zindex-sticky + 5;
   }
-
-  // override @atlaskit/navigation-next styles
   div[class$='-Outer'] {
     div[class$='-Shadow'] {
       background: unset;
@@ -47,6 +44,31 @@
   }
 }
 
+// Drawer Mode
+@include media-breakpoint-down(xs) {
+  .grw-sidebar {
+    position: fixed;
+    z-index: $zindex-fixed - 5;
+
+    // override @atlaskit/navigation-next styles
+    div[class$='-Outer'],
+    div[class$='-teprsg'] {
+      display: none;
+    }
+
+    &:not(.open) {
+      div[class$='-NavigationContainer'] {
+        left: -#{$grw-sidebar-nav-width + $grw-sidebar-content-min-width};
+      }
+    }
+    &.open {
+      div[class$='-NavigationContainer'] {
+        left: 0;
+      }
+    }
+  }
+}
+
 .grw-sidebar-header-container {
   padding: 10px;
 

src/client/styles/scss/_variables.scss

@@ -6,7 +6,11 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 
 //== Layout
 $grw-navbar-height: 50px;
-$grw-logo-width: 64px;
+
+$grw-sidebar-nav-width: 64px;
+$grw-sidebar-content-min-width: 240px;
+
+$grw-logo-width: $grw-sidebar-nav-width;
 $grw-logomark-width: 40px;
 
 // fix tab width to 95 pixels

src/server/views/layout/layout.html

@@ -134,9 +134,8 @@
 
   <div class="d-flex">
     {# Sidebar #}
-    <nav class="d-none d-sm-block">
-      <div id="grw-sidebar" class="grw-sidebar"></div>
-    </nav>
+    <div id="grw-sidebar-wrapper"></div>
+
     <div id="page-wrapper" class="flex-grow-1">
       {% block layout_main %}
       {% endblock %} {# layout_main #}