impl isDrawerMode getter

src/client/js/components/Sidebar.jsx

@@ -35,14 +35,7 @@ class Sidebar extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { appContainer } = this.props;
-
-    let isDrawerMode = appContainer.state.isDrawerMode;
-    if (isDrawerMode == null) {
-      isDrawerMode = this.props.isDrawerModeOnInit;
-    }
-
-    this.toggleDrawerMode(isDrawerMode);
+    this.toggleDrawerMode(this.isDrawerMode);
   }
 
   /**
@@ -61,6 +54,17 @@ class Sidebar extends React.Component {
     };
   }
 
+  /**
+   * return whether drawer mode or not
+   */
+  get isDrawerMode() {
+    let isDrawerMode = this.props.appContainer.state.isDrawerMode;
+    if (isDrawerMode == null) {
+      isDrawerMode = this.props.isDrawerModeOnInit;
+    }
+    return isDrawerMode;
+  }
+
   toggleDrawerMode(bool) {
     const { navigationUIController } = this.props;
 
@@ -159,11 +163,11 @@ class Sidebar extends React.Component {
   }
 
   render() {
-    const { isDrawerMode, isDrawerOpened } = this.props.appContainer.state;
+    const { isDrawerOpened } = this.props.appContainer.state;
 
     return (
       <>
-        <div className={`grw-sidebar ${isDrawerMode ? 'grw-sidebar-drawer' : ''} ${isDrawerOpened ? 'open' : ''}`}>
+        <div className={`grw-sidebar ${this.isDrawerMode ? 'grw-sidebar-drawer' : ''} ${isDrawerOpened ? 'open' : ''}`}>
           <ThemeProvider
             theme={theme => ({
               ...theme,