No layout required to open/close navbar

trungdq88 · Jul 19, 2016 · 74c3cd2 · 74c3cd2
1 parent fe87068
commit 74c3cd2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -4,6 +4,7 @@ import MainContent from './MainContent/MainContent.jsx';
 import NavMenu from './NavMenu/NavMenu.jsx';
 import action, { ACTIONS } from '../action/action.js';
 import { matchParams } from '../utils/routes.js';
+import classNames from 'classnames';
 
 class App extends React.Component {
 
@@ -57,7 +58,7 @@ class App extends React.Component {
       <div>
         <div
           id="menu-overlay"
-          style={{ display: this.state.open && !this.state.full ? 'block' : 'none' }}
+          className={classNames({ show: this.state.open && !this.state.full })}
           onClick={() => action.onNext({ name: ACTIONS.CLOSE_NAV_MENU })}
         ></div>
         <NavMenu

diff --git a/src/components/App.less b/src/components/App.less
@@ -48,13 +48,16 @@ a {
 }
 
 #menu-overlay {
-  display: none;
   position: fixed;
   top: 0;
   right: 0;
   left: 84%;
   bottom: 0;
   z-index: 3;
+  transform: translate3d(-1000px, 0, 0);
+  &.show {
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 .list-appear, .list-enter {

diff --git a/src/components/MainContent/MainContent.jsx b/src/components/MainContent/MainContent.jsx
@@ -18,7 +18,6 @@ export default class MainContent extends React.Component {
       scrollTop: 0,
       toast: null, // object shape: { message: 'example', timeout: 3000, button: <Example /> }
     };
-    // this.wait = false;
     this.onPageLoad = this.onPageLoad.bind(this);
   }
 
@@ -40,18 +39,18 @@ export default class MainContent extends React.Component {
       });
   }
 
-  componentWillReceiveProps() {
-    this.setState({
-      scrollTop: this.refs.scrollSection.scrollTop,
-    });
-  }
-
-  componentWillUnmount() {
-    // this.obsMoveHeader.dispose && this.obsMoveHeader.dispose();
+  componentWillReceiveProps(next) {
+    // We only need to update the scrollTop when page change
+    if (next.open === this.props.open) {
+      this.setState({
+        // Caution: this force layout
+        scrollTop: this.refs.scrollSection.scrollTop,
+      });
+    }
   }
 
   onPageLoad() {
-    // Caution: this force reflow
+    // Caution: this force layout
     this.refs.scrollSection.scrollTop = 0;
   }