nodegin#23 Add hide/show sidebar options

tsangwailam · Dec 6, 2016 · 86002c5 · 86002c5
1 parent 7965afe
commit 86002c5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 29 deletions.
diff --git a/src/App/App.css b/src/App/App.css
@@ -72,6 +72,7 @@ header > a {
   }
 }
 .App-content {
+  margin-top: 5rem;
   margin-bottom: 6rem;
 }
 .App.dark .ui.form textarea, .App.dark .ui.form input {
@@ -95,13 +96,13 @@ header > a {
   flex-direction: column;
   height: 100%;
   left: 0;
-  max-width: 150px;
+  max-width: 200px;
   -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
   padding: 3em 0 1em 0;
   position: fixed;
   top: 0;
-  width: 40%;
+  width: 100%;
   z-index: 41;
 }
 .App.light .App-drawer {
@@ -110,6 +111,7 @@ header > a {
 .App-drawer-lower {
   flex: 1;
   overflow: auto;
+  height: 30%;
 }
 .App-drawer-item {
   cursor: pointer;

diff --git a/src/App/App.js b/src/App/App.js
@@ -35,7 +35,7 @@ class App extends Component {
   state = {
     drawerOpen: false,
     modalOpen: false,
-    sidebarDocked: false
+    drawerDocked: false
   }
 
   async componentDidMount() {
@@ -74,6 +74,12 @@ class App extends Component {
       location.reload(true)
     }
     this.props.actions.onSetCategories(list)
+
+    let mql = window.matchMedia(`(min-width: 800px)`);
+    let opened = mql.matches && this.props.app.dockMenu;
+    this.mediaQueryChanged = this.mediaQueryChanged.bind(this);
+    mql.addListener(this.mediaQueryChanged);
+    this.setState({mql: mql, drawerOpen: opened, drawerDocked: opened});
   }
 
   scrollToTop() {
@@ -92,27 +98,13 @@ class App extends Component {
     window.requestAnimationFrame(step)
   }
 
-
-  async componentWillMount() {
-    let mql = window.matchMedia(`(min-width: 800px)`);
-    mql.addListener(this.mediaQueryChanged);
-    this.setState({mql: mql, drawerOpen: mql.matches});
-
-  }
-
   async componentWillUnmount() {
     this.state.mql.removeListener(this.mediaQueryChanged);
   }
 
   async mediaQueryChanged() {
-      console.log("change open");
-
-      // this.setState({drawerOpen: !this.state.drawerOpen});
-      this.setState({ drawerOpen: !this.state.drawerOpen }, () => {
-          document.body.style.overflow = this.state.drawerOpen ? 'hidden' : 'visible'
-      })
-
-      this.state.mql.removeListener(this.mediaQueryChanged);
+      let opened = this.state.mql.matches && this.props.app.dockMenu;
+      this.setState({drawerOpen: opened, drawerDocked: opened});
   }
 
   render() {
@@ -125,6 +117,10 @@ class App extends Component {
         document.body.style.overflow = this.state.drawerOpen ? 'hidden' : 'visible'
       })
     }
+    const closeDrawer = e => {
+      this.setState({ drawerOpen: false });
+      document.body.style.overflow = 'hidden';
+    }
     const linkTo = (path, e) => {
       browserHistory.push(path)
       toggleDrawer(e)
@@ -155,6 +151,7 @@ class App extends Component {
     )
     return (
       <div className={ `App ${ this.props.app.darkMode ? 'dark' : 'light' }` }>
+        <Sidebar sidebarClassName="App-drawer" sidebar={drawer} open={this.state.drawerOpen} docked={this.props.app.dockMenu&&this.state.drawerDocked} onSetOpen={closeDrawer}>
         <Helmet title={ this.props.app.officeMode ? 'LIHKG Web' : this.props.app.pageTitle }/>
         <header>
           <div>
@@ -194,15 +191,6 @@ class App extends Component {
             </Modal.Description>
           </Modal.Content>
         </Modal>
-        {/*<div style={{ pointerEvents: this.state.drawerOpen ? 'auto' : 'none' }}>*/}
-          {/*<VelocityComponent animation={{ opacity: this.state.drawerOpen ? 1 : 0 }} duration={ 250 }>*/}
-            {/*<b className="App-drawerOverlay" onClick={ toggleDrawer }/>*/}
-          {/*</VelocityComponent>*/}
-          {/*<VelocityComponent animation={{ translateX: this.state.drawerOpen ? 0 : '-100%' }} duration={ 250 }>*/}
-            {/*{ drawer }*/}
-          {/*</VelocityComponent>*/}
-        {/*</div>*/}
-        <Sidebar sidebarClassName="App-drawer" sidebar={drawer} open={this.state.drawerOpen} docked={this.state.drawerOpen} onSetOpen={toggleDrawer}>
         <main className="App-content">
           { children }
           <Settings ref={ linkRef } { ...this.props }/>

diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
@@ -45,7 +45,7 @@ class Settings extends Component {
               </Button>
             </div>
             <div className="Settings-row">
-              <span>癡住條命</span>
+              <span>癡實選單</span>
               <Button toggle active={ this.props.app.dockMenu } onClick={ this.props.actions.onToggleDockMenu }>
                   { this.props.app.dockMenu ? 'ON' : 'OFF' }
               </Button>