switching drawer mode with media query

package.json

@@ -170,7 +170,6 @@
     "bootstrap": "^4.4.1",
     "browser-bunyan": "^1.3.0",
     "browser-sync": "^2.26.3",
-    "bs-breakpoints": "^1.1.1",
     "bunyan-debug": "^2.0.0",
     "cli": "~1.0.1",
     "codemirror": "^5.48.4",

src/client/js/components/Sidebar.jsx

@@ -17,6 +17,9 @@ import SidebarNav from './Sidebar/SidebarNav';
 import History from './Sidebar/History';
 import CustomSidebar from './Sidebar/CustomSidebar';
 
+
+const sidebarDefaultWidth = 240;
+
 class Sidebar extends React.Component {
 
   static propTypes = {
@@ -28,6 +31,53 @@ class Sidebar extends React.Component {
     currentContentsId: 'custom',
   };
 
+  componentWillMount() {
+    // const { appContainer, navigationUIController } = this.props;
+    // appContainer.registerComponentInstance('UIController', navigationUIController);
+    this.initBreakpointEvents();
+  }
+
+  initBreakpointEvents() {
+    const { appContainer, navigationUIController } = this.props;
+
+    document.addEventListener('DOMContentLoaded', () => {
+      // get the value of '--breakpoint-*'
+      // const breakpointSm = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-sm'), 10);
+      const breakpointMd = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md'), 10);
+
+      const smHandler = (mql) => {
+        if (mql.matches) {
+          // cache width
+          this.sidebarWidthCached = navigationUIController.state.productNavWidth;
+
+          appContainer.setState({ isDrawerOpened: false });
+          navigationUIController.disableResize();
+          navigationUIController.expand();
+          navigationUIController.setState({ productNavWidth: sidebarDefaultWidth });
+        }
+        else {
+          appContainer.setState({ isDrawerOpened: false });
+          navigationUIController.enableResize();
+
+          // restore width
+          if (this.sidebarWidthCached != null) {
+            navigationUIController.setState({ productNavWidth: this.sidebarWidthCached });
+          }
+        }
+      };
+
+      // const mediaQueryForXs = window.matchMedia(`(max-width: ${breakpointSm}px)`);
+      const mediaQueryForSm = window.matchMedia(`(max-width: ${breakpointMd}px)`);
+
+      // add event listener
+      // mediaQueryForXs.addListener(xsHandler);
+      mediaQueryForSm.addListener(smHandler);
+      // initialize
+      // xsHandler(mediaQueryForXs);
+      smHandler(mediaQueryForSm);
+    });
+  }
+
   itemSelectedHandler = (contentsId) => {
     const { navigationUIController } = this.props;
     const { currentContentsId } = this.state;

src/client/js/services/AppContainer.js

@@ -3,10 +3,6 @@ import { Container } from 'unstated';
 import axios from 'axios';
 import urljoin from 'url-join';
 
-import { throttle } from 'throttle-debounce';
-
-import bsBreakpoints from 'bs-breakpoints';
-
 import InterceptorManager from '@commons/service/interceptor-manager';
 
 import emojiStrategy from '../util/emojione/emoji_strategy_shrinked.json';
@@ -38,7 +34,6 @@ export default class AppContainer extends Container {
       preferDarkModeByMediaQuery: false,
       preferDarkModeByUser: null,
       isDrawerOpened: false,
-      breakpoint: null,
     };
 
     const body = document.querySelector('body');
@@ -106,35 +101,11 @@ export default class AppContainer extends Container {
   }
 
   init() {
-    this.initBreakpointEvents();
+    // this.initBreakpointEvents();
     this.initColorScheme();
     this.initPlugins();
   }
 
-  initBreakpointEvents() {
-    document.addEventListener('DOMContentLoaded', () => {
-      // bsBreakpoints.init(); // unused for throttling
-      bsBreakpoints.detectBreakpoint();
-      window.addEventListener('resize', throttle(50, () => {
-        bsBreakpoints.dispatchBreakpoint(bsBreakpoints.detectBreakpoint());
-      }));
-
-      this.setState({ breakpoint: bsBreakpoints.getCurrentBreakpoint() });
-
-      // -- Activate the following VanillaJS version when window.jQuery is null
-      //   cz: bs-breakpoints switch jQuery/VanillaJS automatically
-      //   see: https://github.com/Johann-S/bs-breakpoints/blob/beecfa28b4f42a43383234e867c2cea2c0eca5f5/src/index.js#L80-L92
-
-      // window.addEventListener('new.bs.breakpoint', (e) => {
-      $(window).on('new.bs.breakpoint', (e) => {
-        // console.log(e);
-        // this.setState({ breakpoint: e.breakpoint });
-      });
-    });
-
-
-  }
-
   async initColorScheme() {
     const switchStateByMediaQuery = (mql) => {
       const preferDarkMode = mql.matches;

src/client/styles/scss/_sidebar.scss

@@ -45,17 +45,11 @@
 }
 
 // Drawer Mode
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .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};

src/server/views/layout/layout.html

@@ -75,12 +75,12 @@
 
   {% block layout_head_nav %}
   <nav class="navbar grw-navbar navbar-expand navbar-dark fixed-top mb-0 px-0">
-    <ul class="navbar-nav d-sm-none mr-auto">
+    <ul class="navbar-nav d-md-none mr-auto">
       <li id="grw-navbar-toggler" class="nav-item"></li>
     </ul>
 
     {# Brand Logo #}
-    <div class="navbar-brand mr-sm-auto">
+    <div class="navbar-brand mr-md-auto">
       <a class="grw-logo d-block" href="/">
         {% include '../widget/logo.html' %}
       </a>

yarn.lock

@@ -3224,11 +3224,6 @@ browserslist@^4.8.3:
     electron-to-chromium "^1.3.349"
     node-releases "^1.1.49"
 
-bs-breakpoints@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/bs-breakpoints/-/bs-breakpoints-1.1.1.tgz#023f0c501059529f6d2647e906cedd656a00b7a9"
-  integrity sha512-lSLbE0L2Nr1yHhukDHc7UIiNoWcKbBLcVNA7QKuHL3w+iNLIo6JlX3tHJWbaLqb/dGKD0xzlPLZ5FKfIMAJbXg==
-
 bs-recipes@1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/bs-recipes/-/bs-recipes-1.3.4.tgz#0d2d4d48a718c8c044769fdc4f89592dc8b69585"