nodegin#23 Add sidebar docking

tsangwailam · Dec 6, 2016 · 98d2749 · 98d2749
1 parent 90b0f98
commit 98d2749
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -18,6 +18,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",

diff --git a/src/App/App.css b/src/App/App.css
@@ -93,10 +93,10 @@ header > a {
   background: #333;
   height: 100%;
   left: 0;
-  max-width: 320px;
+  max-width: 150px;
   -webkit-overflow-scrolling: touch;
   overflow-x: hidden;
-  padding: 1em 0;
+  padding: 3em 0 1em 0;
   position: fixed;
   top: 0;
   width: 40%;

diff --git a/src/App/App.js b/src/App/App.js
@@ -5,6 +5,7 @@ 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 } from 'semantic-ui-react'
 import { VelocityComponent } from 'velocity-react'
@@ -34,6 +35,7 @@ class App extends Component {
   state = {
     drawerOpen: false,
     modalOpen: false,
+    sidebarDocked: false
   }
 
   async componentDidMount() {
@@ -62,6 +64,10 @@ class App extends Component {
     if (isStory && !this.props.app.storyMode) {
       this.props.actions.onToggleStoryMode()
     }
+    const isDockMenu = JSON.parse(localStorage.getItem('dm'))
+    if (isDockMenu && !this.props.app.dockMenu) {
+        this.props.actions.onToggleDockMenu()
+    }
 
     let list
     try {
@@ -90,6 +96,29 @@ 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);
+  }
+
   render() {
     let { user } = this.props.app.user
     const linkRef = e => this.settings = e
@@ -109,7 +138,7 @@ class App extends Component {
       this.setState({ modalOpen: !this.state.modalOpen })
     }
     const drawer = (
-      <div className="App-drawer">
+      <div>
         { this.props.app.categories.map(c => {
           const click = e => {
             setTimeout(browserHistory.push.bind(null, `/category/${ c.cat_id }`), 250)
@@ -169,18 +198,20 @@ 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>
+        {/*<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 }/>
         </main>
+        </Sidebar>
       </div>
     )
   }

diff --git a/src/Settings/Settings.js b/src/Settings/Settings.js
@@ -44,6 +44,12 @@ class Settings extends Component {
                 { this.props.app.storyMode ? '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

diff --git a/src/actions.js b/src/actions.js
@@ -25,6 +25,11 @@ export const onToggleStoryMode = () => ({
   type: TOGGLE_STORY_MODE,
 })
 
+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,

diff --git a/src/reducers.js b/src/reducers.js
@@ -6,6 +6,7 @@ const initialStates = {
   darkMode: true,
   officeMode: false,
   storyMode: false,
+  dockMenu: false,
   categories: [],
   visitedThreads: JSON.parse(localStorage.getItem('vts')) || [],
 }
@@ -41,6 +42,12 @@ const app = (state = initialStates, action = {}) => {
         ...state,
         storyMode: !state.storyMode,
       }
+    case types.TOGGLE_DOCK_MENU:
+        localStorage.setItem('dm', !state.dockMenu)
+        return {
+            ...state,
+            dockMenu: !state.dockMenu,
+        }
     case types.SET_CATEGORIES:
       return {
         ...state,