fix: horizontal sidebar style on macOS (#482)

3 files changed, 11 insertions, 13 deletions

diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx
index dd81f4ab5..fef5baf64 100644
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -151,7 +151,7 @@ class Sidebar extends Component {
       hideNotificationsButton,
       hideSettingsButton,
       hideSplitModeButton,
-      useVerticalStyle,
+      useHorizontalStyle,
       splitMode,
     } = stores.settings.app;
     const { intl } = this.props;
@@ -180,7 +180,7 @@ class Sidebar extends Component {
           {...this.props}
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
-          useVerticalStyle={stores.settings.all.app.useVerticalStyle}
+          useHorizontalStyle={stores.settings.all.app.useHorizontalStyle}
         />
         <>
           {numberActiveButtons <= 1 || hideCollapseButton ? null : (
@@ -189,16 +189,14 @@ class Sidebar extends Component {
               onClick={() => toggleCollapseMenu()}
               className="sidebar__button sidebar__button--hamburger-menu"
             >
-              {isMenuCollapsed && !useVerticalStyle ? (
-                <Icon icon={mdiMenu} size={1.5} />
-              ) : null}
+              {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
 
-              {isMenuCollapsed && useVerticalStyle ? (
-                <Icon icon={mdiChevronRight} size={1.5} />
+              {!isMenuCollapsed && !useHorizontalStyle ? (
+                <Icon icon={mdiChevronDown} size={1.5} />
               ) : null}
 
-              {!isMenuCollapsed ? (
-                <Icon icon={mdiChevronDown} size={1.5} />
+              {!isMenuCollapsed && useHorizontalStyle ? (
+                <Icon icon={mdiChevronRight} size={1.5} />
               ) : null}
             </button>
           )}
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index d9e11df41..f0cb48e5e 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -20,7 +20,7 @@ class TabBar extends Component {
     updateService: PropTypes.func.isRequired,
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
-    useVerticalStyle: PropTypes.bool.isRequired,
+    useHorizontalStyle: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
@@ -80,13 +80,13 @@ class TabBar extends Component {
       toggleAudio,
       toggleDarkMode,
       deleteService,
-      useVerticalStyle,
+      useHorizontalStyle,
       showMessageBadgeWhenMutedSetting,
       showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
-    const axis = useVerticalStyle ? 'x' : 'y';
+    const axis = useHorizontalStyle ? 'x' : 'y';
 
     return (
       <div>
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index 32a44aa37..cb1d261f8 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -712,7 +712,7 @@ class EditSettingsForm extends Component {
 
                 <Select field={form.$('sidebarServicesLocation')} />
 
-                <Toggle field={form.$('useVerticalStyle')} />
+                <Toggle field={form.$('useHorizontalStyle')} />
 
                 <Toggle field={form.$('hideCollapseButton')} />