BugFix for using addBreakpointEvents

src/client/js/components/Sidebar.jsx

@@ -39,7 +39,7 @@ class Sidebar extends React.Component {
     const { appContainer, navigationUIController } = this.props;
 
     const mdOrAvobeHandler = (mql) => {
-      // md or above
+      // sm -> md
       if (mql.matches) {
         appContainer.setState({ isDrawerOpened: false });
         navigationUIController.enableResize();
@@ -49,7 +49,7 @@ class Sidebar extends React.Component {
           navigationUIController.setState({ productNavWidth: this.sidebarWidthCached });
         }
       }
-      // sm or below
+      // md -> sm
       else {
         // cache width
         this.sidebarWidthCached = navigationUIController.state.productNavWidth;

src/client/js/services/AppContainer.js

@@ -115,14 +115,18 @@ export default class AppContainer extends Container {
   }
 
   initBreakpointEvents() {
-    // TODO: fix bug -- 2020.05.26
-    // ['xs', 'sm', 'md', 'lg', 'xl'].forEach((breakpoint) => {
-    //   this.addBreakpointEvents(breakpoint, (mql) => {
-    //     if (mql.matches) {
-    //       this.setState({ breakpoint });
-    //     }
-    //   }, true);
-    // });
+    this.addBreakpointEvents('sm', (mql) => {
+      this.setState({ breakpoint: mql.matches ? 'sm' : 'xs' });
+    }, true);
+    this.addBreakpointEvents('md', (mql) => {
+      this.setState({ breakpoint: mql.matches ? 'md' : 'sm' });
+    }, true);
+    this.addBreakpointEvents('lg', (mql) => {
+      this.setState({ breakpoint: mql.matches ? 'lg' : 'md' });
+    }, true);
+    this.addBreakpointEvents('xl', (mql) => {
+      this.setState({ breakpoint: mql.matches ? 'xl' : 'lg' });
+    }, true);
   }
 
   async initColorScheme() {