Feature: Hide sidebar buttons toggled behind a hamburger menu (#81)

* Reordered the 'Settings' button in sidebar closer to the other buttons being hidden

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>

1 files changed, 108 insertions, 60 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index d0b2dcf72..91178a370 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -11,6 +11,9 @@ import {
   mdiBellOff,
   mdiBell,
   mdiLock,
+  mdiMenu,
+  mdiChevronDown,
+  mdiChevronRight,
 } from '@mdi/js';
 
 import Tabbar from '../services/tabs/Tabbar';
@@ -98,6 +101,7 @@ class Sidebar extends Component {
 
   state = {
     tooltipEnabled: true,
+    isCollapsed: false
   };
 
   componentDidUpdate() {
@@ -112,6 +116,10 @@ class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
+  collapseMenu() {
+    this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed }));
+  }
+
   updateToolTip() {
     this.disableToolTip();
     setTimeout(this.enableToolTip.bind(this));
@@ -128,6 +136,13 @@ class Sidebar extends Component {
       actions,
       isTodosServiceActive,
     } = this.props;
+    const {
+      hideRecipesButton,
+      hideWorkspacesButton,
+      hideNotificationsButton,
+      hideSettingsButton,
+      useVerticalStyle
+    } = stores.settings.app;
     const { intl } = this.props;
     const todosToggleMessage = todosStore.isTodosPanelVisible
       ? messages.closeTodosDrawer
@@ -137,6 +152,14 @@ class Sidebar extends Component {
       ? messages.closeWorkspaceDrawer
       : messages.openWorkspaceDrawer;
 
+    const numberActiveButtons = [
+      !hideRecipesButton,
+      !hideWorkspacesButton,
+      !hideNotificationsButton,
+      !hideSettingsButton,
+      todosStore.isFeatureEnabledByUser
+    ].filter(Boolean).length;
+
     return (
       <div className="sidebar">
         <Tabbar
@@ -146,32 +169,91 @@ class Sidebar extends Component {
           useVerticalStyle={stores.settings.all.app.useVerticalStyle}
         />
         <>
-          <button
-            type="button"
-            onClick={() => openSettings({ path: 'recipes' })}
-            className="sidebar__button sidebar__button--new-service"
-            data-tip={`${intl.formatMessage(
-              messages.addNewService,
-            )} (${addNewServiceShortcutKey(false)})`}
-          >
-            <Icon icon={mdiPlusBox} size={1.5} />
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              toggleWorkspaceDrawer();
-              this.updateToolTip();
-            }}
-            className={`sidebar__button sidebar__button--workspaces ${
-              isWorkspaceDrawerOpen ? 'is-active' : ''
-            }`}
-            data-tip={`${intl.formatMessage(
-              workspaceToggleMessage,
-            )} (${workspaceToggleShortcutKey(false)})`}
-          >
-            <Icon icon={mdiViewGrid} size={1.5} />
-          </button>
-          {todosStore.isFeatureEnabledByUser ? (
+          {numberActiveButtons <= 1 ? (
+            null
+          ) :
+            <button
+              type="button"
+              onClick={() => this.collapseMenu()}
+              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} />
+            }
+            </button>
+          }
+          {!hideRecipesButton && !this.state.isCollapsed ? (
+            <button
+              type="button"
+              onClick={() => openSettings({ path: 'recipes' })}
+              className="sidebar__button sidebar__button--new-service"
+              data-tip={`${intl.formatMessage(
+                messages.addNewService,
+              )} (${addNewServiceShortcutKey(false)})`}
+            >
+              <Icon icon={mdiPlusBox} size={1.5} />
+            </button>
+          ) : null}
+          {!hideWorkspacesButton && !this.state.isCollapsed ? (
+            <button
+              type="button"
+              onClick={() => {
+                toggleWorkspaceDrawer();
+                this.updateToolTip();
+              }}
+              className={`sidebar__button sidebar__button--workspaces ${
+                isWorkspaceDrawerOpen ? 'is-active' : ''
+              }`}
+              data-tip={`${intl.formatMessage(
+                workspaceToggleMessage,
+              )} (${workspaceToggleShortcutKey(false)})`}
+            >
+              <Icon icon={mdiViewGrid} size={1.5} />
+            </button>
+          ) : null}
+          {!hideNotificationsButton && !this.state.isCollapsed ? (
+            <button
+              type="button"
+              onClick={() => {
+                toggleMuteApp();
+                this.updateToolTip();
+              }}
+              className={`sidebar__button sidebar__button--audio ${
+                isAppMuted ? 'is-muted' : ''
+              }`}
+              data-tip={`${intl.formatMessage(
+                isAppMuted ? messages.unmute : messages.mute,
+              )} (${muteFerdiumShortcutKey(false)})`}
+            >
+              <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
+            </button>
+          ) : null}
+          {!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}
+          {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? (
             <button
               type="button"
               onClick={() => {
@@ -189,22 +271,6 @@ class Sidebar extends Component {
               <Icon icon={mdiCheckAll} size={1.5} />
             </button>
           ) : null}
-          <button
-            type="button"
-            onClick={() => {
-              toggleMuteApp();
-              this.updateToolTip();
-            }}
-            className={`sidebar__button sidebar__button--audio ${
-              isAppMuted ? 'is-muted' : ''
-            }`}
-            data-tip={`${intl.formatMessage(
-              isAppMuted ? messages.unmute : messages.mute,
-            )} (${muteFerdiumShortcutKey(false)})`}
-          >
-            <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
-          </button>
-
           {stores.settings.all.app.lockingFeatureEnabled ? (
             <button
               type="button"
@@ -225,24 +291,6 @@ class Sidebar extends Component {
             </button>
           ) : null}
         </>
-        <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>
         {this.state.tooltipEnabled && (
           <ReactTooltip place="right" type="dark" effect="solid" />
         )}