Add Sidebar hide/show option

package.json

@@ -17,6 +17,7 @@
     "react-helmet": "^3.2.2",
     "react-redux": "^4.4.6",
     "react-router": "^3.0.0",
+    "react-sidebar": "^2.2.1",
     "redux": "^3.6.0",
     "semantic-ui-react": "^0.61.4",
     "string.prototype.repeat": "^0.2.0",

src/App/App.css

@@ -80,6 +80,7 @@ header > a {
   }
 }
 .App-content {
+  margin-top: 5rem;
   padding-bottom: 6em;
 }
 .App.dark .ui.form textarea, .App.dark .ui.form input {
@@ -103,13 +104,13 @@ header > a {
   flex-direction: column;
   height: 100%;
   left: 0;
-  max-width: 320px;
+  max-width: 200px;
   -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
-  padding: 1em 0;
+  padding: 3em 0 1em 0;
   position: fixed;
   top: 0;
-  width: 40%;
+  width: 100%;
   z-index: 41;
 }
 .App.light .App-drawer {
@@ -118,6 +119,7 @@ header > a {
 .App-drawer-lower {
   flex: 1;
   overflow: auto;
+  height: 30%;
 }
 .App-drawer-item {
   cursor: pointer;

src/App/App.js

@@ -5,9 +5,9 @@ import { bindActionCreators } from 'redux'
 import * as types from '../actions'
 import Helmet from 'react-helmet'
 import moment from 'moment'
+import Sidebar from 'react-sidebar'
 
 import { Icon, Modal, Image, Divider } from 'semantic-ui-react'
-import { VelocityComponent } from 'velocity-react'
 import Settings from '../Settings/Settings'
 import './App.css'
 
@@ -34,6 +34,7 @@ class App extends Component {
   state = {
     drawerOpen: false,
     modalOpen: false,
+    drawerDocked: false
   }
 
   async componentDidMount() {
@@ -58,6 +59,10 @@ class App extends Component {
     if (isSplit && !this.props.app.splitMode) {
       this.props.actions.onToggleSplitMode()
     }
+    const isDockMenu = JSON.parse(localStorage.getItem('dm'))
+    if (isDockMenu && !this.props.app.dockMenu) {
+        this.props.actions.onToggleDockMenu()
+    }
 
     let list
     try {
@@ -68,6 +73,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() {
@@ -86,6 +97,15 @@ class App extends Component {
     window.requestAnimationFrame(step)
   }
 
+  async componentWillUnmount() {
+    this.state.mql.removeListener(this.mediaQueryChanged);
+  }
+
+  async mediaQueryChanged() {
+      let opened = this.state.mql.matches && this.props.app.dockMenu;
+      this.setState({drawerOpen: opened, drawerDocked: opened});
+  }
+
   render() {
     let { user } = this.props.app.user
     const linkRef = e => this.settings = e
@@ -96,6 +116,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)
@@ -126,6 +150,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>
@@ -165,18 +190,11 @@ 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>
         <main className="App-content">
           { children }
           <Settings ref={ linkRef } { ...this.props }/>
         </main>
+        </Sidebar>
       </div>
     )
   }

src/Settings/Settings.js

@@ -44,6 +44,12 @@ class Settings extends Component {
                 { this.props.app.splitMode ? 'ON' : 'OFF' }
               </Button>
             </div>
+            <div className="Settings-row">
+              <span>癡實選單</span>
+              <Button toggle active={ this.props.app.dockMenu } onClick={ this.props.actions.onToggleDockMenu }>
+                  { this.props.app.dockMenu ? 'ON' : 'OFF' }
+              </Button>
+            </div>
             <div className="Settings-row">
               <span>洗底</span>
               <Popup

src/actions.js

@@ -43,6 +43,11 @@ export const deleteStoryModeUserId = () => ({
   DELETE_STORY_MODE_USER_ID
 })
 
+export const TOGGLE_DOCK_MENU = 'TOGGLE_DOCK_MENU'
+export const onToggleDockMenu = () => ({
+  type: TOGGLE_DOCK_MENU,
+})
+
 export const SET_CATEGORIES = 'SET_CATEGORIES'
 export const onSetCategories = categories => ({
   type: SET_CATEGORIES,

src/reducers.js

@@ -7,6 +7,7 @@ const initialStates = {
   darkMode: true,
   officeMode: false,
   splitMode: false,
+  dockMenu: false,
   categories: [],
   visitedThreads: JSON.parse(localStorage.getItem('vts')) || [],
 }
@@ -42,6 +43,12 @@ const app = (state = initialStates, action = {}) => {
         ...state,
         darkMode: !state.darkMode,
       }
+      case types.TOGGLE_DOCK_MENU:
+          localStorage.setItem('dm', !state.dockMenu)
+          return {
+              ...state,
+              dockMenu: !state.dockMenu,
+          }
     case types.TOGGLE_SPLIT_MODE:
       localStorage.setItem('spl', !state.splitMode)
       return {