5 files changed, 69 insertions, 48 deletions

diff --git a/src/actions/app.ts b/src/actions/app.ts
index a798a8b0b..2e60c9327 100644
--- a/src/actions/app.ts
+++ b/src/actions/app.ts
@@ -26,5 +26,6 @@ export default <ActionDefinitions>{
     overrideSystemMute: PropTypes.bool,
   },
   toggleMuteApp: {},
+  toggleCollapseMenu: {},
   clearAllCache: {},
 };
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.jsx
index 1d3c81dcd..6949544b4 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.jsx
@@ -93,6 +93,8 @@ class Sidebar extends Component {
     wakeUpService: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
+    toggleCollapseMenu: PropTypes.func.isRequired,
+    isMenuCollapsed: PropTypes.bool.isRequired,
     isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
     toggleWorkspaceDrawer: PropTypes.func.isRequired,
     isTodosServiceActive: PropTypes.bool.isRequired,
@@ -105,10 +107,13 @@ class Sidebar extends Component {
     }).isRequired,
   };
 
-  state = {
-    tooltipEnabled: true,
-    isCollapsed: false
-  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      tooltipEnabled: true,
+    };
+  }
 
   componentDidUpdate() {
     ReactTooltip.rebuild();
@@ -122,10 +127,6 @@ class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
-  collapseMenu() {
-    this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed }));
-  }
-
   updateToolTip() {
     this.disableToolTip();
     setTimeout(this.enableToolTip.bind(this));
@@ -135,6 +136,7 @@ class Sidebar extends Component {
     const {
       openSettings,
       toggleMuteApp,
+      toggleCollapseMenu,
       isAppMuted,
       isWorkspaceDrawerOpen,
       toggleWorkspaceDrawer,
@@ -167,9 +169,11 @@ class Sidebar extends Component {
       !hideNotificationsButton,
       !hideSettingsButton,
       !hideSplitModeButton,
-      todosStore.isFeatureEnabledByUser
+      todosStore.isFeatureEnabledByUser,
     ].filter(Boolean).length;
 
+    const { isMenuCollapsed } = stores.settings.all.app;
+
     return (
       <div className="sidebar">
         <Tabbar
@@ -179,25 +183,26 @@ class Sidebar extends Component {
           useVerticalStyle={stores.settings.all.app.useVerticalStyle}
         />
         <>
-          {numberActiveButtons <= 1 || hideCollapseButton ? (
-            null
-          ) :
+          {numberActiveButtons <= 1 || hideCollapseButton ? null : (
             <button
               type="button"
-              onClick={() => this.collapseMenu()}
+              onClick={() => toggleCollapseMenu()}
               className="sidebar__button sidebar__button--hamburger-menu"
             >
-            {this.state.isCollapsed ?
-              <Icon icon={mdiMenu} size={1.5} />
-            :
-            (useVerticalStyle) ?
-              <Icon icon={mdiChevronRight} size={1.5} />
-            :
-              <Icon icon={mdiChevronDown} size={1.5} />
-            }
+              {isMenuCollapsed && !useVerticalStyle ? (
+                <Icon icon={mdiMenu} size={1.5} />
+              ) : null}
+
+              {isMenuCollapsed && useVerticalStyle ? (
+                <Icon icon={mdiChevronRight} size={1.5} />
+              ) : null}
+
+              {!isMenuCollapsed ? (
+                <Icon icon={mdiChevronDown} size={1.5} />
+              ) : null}
             </button>
-          }
-          {!hideRecipesButton && !this.state.isCollapsed ? (
+          )}
+          {!hideRecipesButton && !isMenuCollapsed ? (
             <button
               type="button"
               onClick={() => openSettings({ path: 'recipes' })}
@@ -209,7 +214,7 @@ class Sidebar extends Component {
               <Icon icon={mdiPlusBox} size={1.5} />
             </button>
           ) : null}
-          {!hideSplitModeButton && !this.state.isCollapsed ? (
+          {!hideSplitModeButton && !isMenuCollapsed ? (
             <button
               type="button"
               onClick={() => {
@@ -228,7 +233,7 @@ class Sidebar extends Component {
               <Icon icon={mdiViewSplitVertical} size={1.5} />
             </button>
           ) : null}
-          {!hideWorkspacesButton && !this.state.isCollapsed ? (
+          {!hideWorkspacesButton && !isMenuCollapsed ? (
             <button
               type="button"
               onClick={() => {
@@ -245,7 +250,7 @@ class Sidebar extends Component {
               <Icon icon={mdiViewGrid} size={1.5} />
             </button>
           ) : null}
-          {!hideNotificationsButton && !this.state.isCollapsed ? (
+          {!hideNotificationsButton && !isMenuCollapsed ? (
             <button
               type="button"
               onClick={() => {
@@ -262,7 +267,7 @@ class Sidebar extends Component {
               <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
             </button>
           ) : null}
-          {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? (
+          {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
             <button
               type="button"
               onClick={() => {
@@ -303,26 +308,26 @@ class Sidebar extends Component {
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
         )}
-        {!hideSettingsButton && !this.state.isCollapsed ? (
-            <button
-              type="button"
-              onClick={() => openSettings({ path: 'app' })}
-              className="sidebar__button sidebar__button--settings"
-              data-tip={`${intl.formatMessage(
-                globalMessages.settings,
-              )} (${settingsShortcutKey(false)})`}
-            >
-              <Icon icon={mdiCog} size={1.5} />
-              {
-                this.props.stores.settings.app.automaticUpdates &&
-                  (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE ||
-                  this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED ||
-                  this.props.showServicesUpdatedInfoBar) && (
-                  <span className="update-available">•</span>
-                )
-              }
-            </button>
-          ) : null}
+        {!hideSettingsButton && !isMenuCollapsed ? (
+          <button
+            type="button"
+            onClick={() => openSettings({ path: 'app' })}
+            className="sidebar__button sidebar__button--settings"
+            data-tip={`${intl.formatMessage(
+              globalMessages.settings,
+            )} (${settingsShortcutKey(false)})`}
+          >
+            <Icon icon={mdiCog} size={1.5} />
+            {this.props.stores.settings.app.automaticUpdates &&
+              (this.props.stores.app.updateStatus ===
+                this.props.stores.app.updateStatusTypes.AVAILABLE ||
+                this.props.stores.app.updateStatus ===
+                  this.props.stores.app.updateStatusTypes.DOWNLOADED ||
+                this.props.showServicesUpdatedInfoBar) && (
+                <span className="update-available">•</span>
+              )}
+          </button>
+        ) : null}
       </div>
     );
   }
diff --git a/src/config.ts b/src/config.ts
index 9a459f338..499f7b9e0 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -263,6 +263,7 @@ export const DEFAULT_APP_SETTINGS = {
   searchEngine: SEARCH_ENGINE_STARTPAGE,
   useVerticalStyle: false,
   hideCollapseButton: false,
+  isMenuCollapsed: false,
   hideRecipesButton: false,
   hideSplitModeButton: true,
   useGrayscaleServices: false,
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 45dd7d75d..1021ab4fa 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -69,7 +69,7 @@ class AppLayoutContainer extends Component {
 
     const { retryRequiredRequests } = this.props.actions.requests;
 
-    const { installUpdate, toggleMuteApp } = this.props.actions.app;
+    const { installUpdate, toggleMuteApp, toggleCollapseMenu } = this.props.actions.app;
 
     const { openSettings, closeSettings } = this.props.actions.ui;
 
@@ -113,6 +113,7 @@ class AppLayoutContainer extends Component {
         services={services.allDisplayed}
         setActive={setActive}
         isAppMuted={settings.all.app.isAppMuted}
+        isMenuCollapsed={settings.all.app.isMenuCollapsed}
         openSettings={openSettings}
         closeSettings={closeSettings}
         reorder={reorder}
@@ -125,6 +126,7 @@ class AppLayoutContainer extends Component {
         hibernateService={hibernate}
         wakeUpService={awake}
         toggleMuteApp={toggleMuteApp}
+        toggleCollapseMenu={toggleCollapseMenu}
         toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
         isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen}
         showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts
index f333a0060..05acbf33d 100644
--- a/src/stores/AppStore.ts
+++ b/src/stores/AppStore.ts
@@ -114,6 +114,9 @@ export default class AppStore extends TypedStore {
     this.actions.app.healthCheck.listen(this._healthCheck.bind(this));
     this.actions.app.muteApp.listen(this._muteApp.bind(this));
     this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this));
+    this.actions.app.toggleCollapseMenu.listen(
+      this._toggleCollapseMenu.bind(this),
+    );
     this.actions.app.clearAllCache.listen(this._clearAllCache.bind(this));
 
     this.registerReactions([
@@ -449,6 +452,15 @@ export default class AppStore extends TypedStore {
     });
   }
 
+  @action _toggleCollapseMenu(): void {
+    this.actions.settings.update({
+      type: 'app',
+      data: {
+        isMenuCollapsed: !this.stores.settings.all.app.isMenuCollapsed,
+      },
+    });
+  }
+
   @action async _clearAllCache() {
     this.isClearingAllCache = true;
     const clearAppCache = this.clearAppCacheRequest.execute();