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>

5 files changed, 164 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" />
         )}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a42df869a..b7d45a01c 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -574,6 +574,14 @@ class EditSettingsForm extends Component {
 
                 <Toggle field={form.$('useVerticalStyle')} />
 
+                <Toggle field={form.$('hideRecipesButton')} />
+
+                <Toggle field={form.$('hideWorkspacesButton')} />
+
+                <Toggle field={form.$('hideNotificationsButton')} />
+
+                <Toggle field={form.$('hideSettingsButton')} />
+
                 <Toggle field={form.$('alwaysShowWorkspaces')} />
 
                 <Hr />
diff --git a/src/config.ts b/src/config.ts
index 4ea762311..48056533f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -243,6 +243,10 @@ export const DEFAULT_APP_SETTINGS = {
   navigationBarBehaviour: 'custom',
   searchEngine: SEARCH_ENGINE_DDG,
   useVerticalStyle: false,
+  hideRecipesButton: false,
+  hideWorkspacesButton: false,
+  hideNotificationsButton: false,
+  hideSettingsButton: false,
   alwaysShowWorkspaces: false,
   liftSingleInstanceLock: false,
   enableLongPressServiceHint: false,
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index c3f2b4415..6f906684e 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -201,6 +201,22 @@ const messages = defineMessages({
     id: 'settings.app.form.useVerticalStyle',
     defaultMessage: 'Use horizontal style',
   },
+  hideRecipesButton: {
+    id: 'settings.app.form.hideRecipesButton',
+    defaultMessage: 'Hide Recipes button',
+  },
+  hideWorkspacesButton: {
+    id: 'settings.app.form.hideWorkspacesButton',
+    defaultMessage: 'Hide Workspace Drawer button',
+  },
+  hideNotificationsButton: {
+    id: 'settings.app.form.hideNotificationsButton',
+    defaultMessage: 'Hide Notifications & Sound button',
+  },
+  hideSettingsButton: {
+    id: 'settings.app.form.hideSettingsButton',
+    defaultMessage: 'Hide Settings button',
+  },
   alwaysShowWorkspaces: {
     id: 'settings.app.form.alwaysShowWorkspaces',
     defaultMessage: 'Always show workspace drawer',
@@ -333,6 +349,10 @@ class EditSettingsScreen extends Component {
           settingsData.enableLongPressServiceHint,
         ),
         useVerticalStyle: Boolean(settingsData.useVerticalStyle),
+        hideRecipesButton: Boolean(settingsData.hideRecipesButton),
+        hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton),
+        hideNotificationsButton: Boolean(settingsData.hideNotificationsButton),
+        hideSettingsButton: Boolean(settingsData.hideSettingsButton),
         alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces),
         accentColor: settingsData.accentColor,
         showMessageBadgeWhenMuted: Boolean(
@@ -679,6 +699,26 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.useVerticalStyle,
           default: DEFAULT_APP_SETTINGS.useVerticalStyle,
         },
+        hideRecipesButton: {
+          label: intl.formatMessage(messages.hideRecipesButton),
+          value: settings.all.app.hideRecipesButton,
+          default: DEFAULT_APP_SETTINGS.hideRecipesButton,
+        },
+        hideWorkspacesButton: {
+          label: intl.formatMessage(messages.hideWorkspacesButton),
+          value: settings.all.app.hideWorkspacesButton,
+          default: DEFAULT_APP_SETTINGS.hideWorkspacesButton,
+        },
+        hideNotificationsButton: {
+          label: intl.formatMessage(messages.hideNotificationsButton),
+          value: settings.all.app.hideNotificationsButton,
+          default: DEFAULT_APP_SETTINGS.hideNotificationsButton,
+        },
+        hideSettingsButton: {
+          label: intl.formatMessage(messages.hideSettingsButton),
+          value: settings.all.app.hideSettingsButton,
+          default: DEFAULT_APP_SETTINGS.hideSettingsButton,
+        },
         alwaysShowWorkspaces: {
           label: intl.formatMessage(messages.alwaysShowWorkspaces),
           value: settings.all.app.alwaysShowWorkspaces,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 795c58365..610355699 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -214,6 +214,10 @@
   "settings.app.form.enableTodos": "Enable Ferdium Todos",
   "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup",
   "settings.app.form.hibernationStrategy": "Hibernation strategy",
+  "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button",
+  "settings.app.form.hideRecipesButton": "Hide Recipes button",
+  "settings.app.form.hideSettingsButton": "Hide Settings button",
+  "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button",
   "settings.app.form.iconSize": "Service icon size",
   "settings.app.form.inactivityLock": "Lock after inactivity",
   "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded",