impl backdrop

src/client/js/components/Sidebar.jsx

@@ -32,8 +32,6 @@ class Sidebar extends React.Component {
   };
 
   componentWillMount() {
-    // const { appContainer, navigationUIController } = this.props;
-    // appContainer.registerComponentInstance('UIController', navigationUIController);
     this.initBreakpointEvents();
   }
 
@@ -53,6 +51,8 @@ class Sidebar extends React.Component {
           appContainer.setState({ isDrawerOpened: false });
           navigationUIController.disableResize();
           navigationUIController.expand();
+
+          // fix width
           navigationUIController.setState({ productNavWidth: sidebarDefaultWidth });
         }
         else {
@@ -78,6 +78,11 @@ class Sidebar extends React.Component {
     });
   }
 
+  backdropClickedHandler = () => {
+    const { appContainer } = this.props;
+    appContainer.setState({ isDrawerOpened: false });
+  }
+
   itemSelectedHandler = (contentsId) => {
     const { navigationUIController } = this.props;
     const { currentContentsId } = this.state;
@@ -113,31 +118,37 @@ class Sidebar extends React.Component {
     const { isDrawerOpened } = this.props.appContainer.state;
 
     return (
-      <div className={`grw-sidebar ${isDrawerOpened ? 'open' : ''}`}>
-        <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>
-      </div>
+            <LayoutManager
+              globalNavigation={this.renderGlobalNavigation}
+              productNavigation={() => null}
+              containerNavigation={this.renderSidebarContents}
+              experimental_hideNavVisuallyOnCollapse
+              experimental_flyoutOnHover
+              experimental_alternateFlyoutBehaviour
+              // experimental_fullWidthFlyout
+              shouldHideGlobalNavShadow
+              showContextualNavigation
+              topOffset={50}
+            >
+            </LayoutManager>
+          </ThemeProvider>
+        </div>
+
+        { isDrawerOpened && (
+          <div className="grw-sidebar-backdrop modal-backdrop show" onClick={this.backdropClickedHandler}></div>
+        ) }
+      </>
     );
   }
 

src/client/styles/scss/_sidebar.scss

@@ -48,7 +48,7 @@
 @include media-breakpoint-down(sm) {
   .grw-sidebar {
     position: fixed;
-    z-index: $zindex-fixed - 5;
+    z-index: $zindex-fixed - 2;
 
     &:not(.open) {
       div[class$='-NavigationContainer'] {
@@ -61,6 +61,10 @@
       }
     }
   }
+
+  .grw-sidebar-backdrop.modal-backdrop {
+    z-index: $zindex-fixed - 4;
+  }
 }
 
 .grw-sidebar-header-container {