Fix sidebar switching off/on on wide screen.

Lokiedu · May 5, 2016 · f371e5b · f371e5b
1 parent 95f1a6f
commit f371e5b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 4 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -99,6 +99,8 @@ export const UPDATE_EDIT_POST_FORM = 'UPDATE_EDIT_POST_FORM';
 
 export const UI__SET_PROGRESS = 'UI__SET_PROGRESS';
 export const UI__TOGGLE_SIDEBAR = 'UI__TOGGLE_SIDEBAR';
+export const UI__SWITCH_OFF_SIDEBAR = 'UI__SWITCH_OFF_SIDEBAR';
+export const UI__SWITCH_ON_SIDEBAR = 'UI__SWITCH_ON_SIDEBAR';
 
 export function addUser(user) {
   return {
@@ -550,6 +552,18 @@ export function toggleUISidebar(isVisible) {
   }
 }
 
+export function switchOffUISidebar() {
+  return {
+    type: UI__SWITCH_OFF_SIDEBAR
+  }
+}
+
+export function switchONUISidebar() {
+  return {
+    type: UI__SWITCH_ON_SIDEBAR
+  }
+}
+
 export function setPostComments(postId, comments) {
   return {
     type: SET_POST_COMMENTS,

diff --git a/src/components/header-logo.js b/src/components/header-logo.js
@@ -21,16 +21,27 @@ import React, {
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 
-import { toggleUISidebar } from '../actions';
+import {
+  toggleUISidebar,
+  switchOffUISidebar,
+  switchONUISidebar
+} from '../actions';
 import currentUserSelector from '../selectors/currentUser';
 import createSelector from '../selectors/createSelector';
 
 class HeaderLogo extends Component {
   toggleSidebar = () => {
     const {
-      dispatch
+      dispatch,
+      ui
     } = this.props;
 
+    if (ui.get('sidebarIsVisible')) {
+      dispatch(switchOffUISidebar());
+    } else {
+      dispatch(switchONUISidebar());
+    }
+
     dispatch(toggleUISidebar());
   };
 
@@ -55,7 +66,7 @@ class HeaderLogo extends Component {
     if (current_user.get('id')) {
       return (
         <div
-          onClick={this.toggleSidebar}
+         onClick={this.toggleSidebar}
           className="header__logo action"
         >
           {logoBody}

diff --git a/src/components/sidebar.js b/src/components/sidebar.js
@@ -70,7 +70,7 @@ class Sidebar extends React.Component {
       dispatch(toggleUISidebar(false));
     }
 
-    if (!ui.get('sidebarIsVisible') && (clientWidth >= breakpointWidth) && (clientWidth > this.state.clientWidth)) {
+    if (!ui.get('sidebarIsVisible') && !ui.get('sidebarSwitchedOff') && (clientWidth >= breakpointWidth) && (clientWidth > this.state.clientWidth)) {
       dispatch(toggleUISidebar(true));
     }
 

diff --git a/src/store/ui.js b/src/store/ui.js
@@ -21,6 +21,7 @@ import * as a from '../actions';
 
 const initialState = i.Map({
   sidebarIsVisible: true,
+  sidebarSwitchedOff: false,
   progress: i.Map({}),
   comments: i.Map({})
 });
@@ -38,6 +39,18 @@ function reducer (state=initialState, action) {
 
         state = state.set('sidebarIsVisible', isVisible);
 
+        break;
+      }
+    case a.UI__SWITCH_OFF_SIDEBAR:
+      {
+        state = state.set('sidebarSwitchedOff', true);
+
+        break;
+      }
+    case a.UI__SWITCH_ON_SIDEBAR:
+      {
+        state = state.set('sidebarSwitchedOff', false);
+
         break;
       }
     case a.UI__SET_PROGRESS: