fix: horizontal sidebar style on macOS (#482)

1 files changed, 28 insertions, 15 deletions

diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts
index 17ae5937e..8b7416126 100644
--- a/src/features/appearance/index.ts
+++ b/src/features/appearance/index.ts
@@ -129,11 +129,12 @@ function generateAccentStyle(accentColorStr) {
 function generateServiceRibbonWidthStyle(
   widthStr,
   iconSizeStr,
-  vertical,
+  horizontal,
   isLabelEnabled,
   sidebarServicesLocation,
   useGrayscaleServices,
   grayscaleServicesDim,
+  showDragArea,
 ) {
   const width = Number(widthStr);
   const iconSize = Number(iconSizeStr) - iconSizeBias;
@@ -141,6 +142,7 @@ function generateServiceRibbonWidthStyle(
   let tabItemHeightBias = -5;
   let sidebarSizeBias = 22;
   const tabItemWidthBias = 3;
+  const verticalStyleOffset = 29;
 
   switch (width) {
     case 35:
@@ -194,24 +196,24 @@ function generateServiceRibbonWidthStyle(
   let sidebarServicesAlignment;
   switch (sidebarServicesLocation) {
     case SIDEBAR_SERVICES_LOCATION_TOPLEFT:
-      sidebarServicesAlignment = vertical ? "left" : "start";
+      sidebarServicesAlignment = horizontal ? 'left' : 'start';
       break;
     case SIDEBAR_SERVICES_LOCATION_CENTER:
-      sidebarServicesAlignment = vertical ? "center" : "center";
+      sidebarServicesAlignment = horizontal ? 'center' : 'center';
       break;
     case SIDEBAR_SERVICES_LOCATION_BOTTOMRIGHT:
-      sidebarServicesAlignment = vertical ? "right" : "end";
+      sidebarServicesAlignment = horizontal ? 'right' : 'end';
       break;
     default:
-      sidebarServicesAlignment = vertical ? "left" : "start";
+      sidebarServicesAlignment = horizontal ? 'left' : 'start';
       break;
   }
 
-  const graysacleServices =
-  `filter: grayscale(1);
-  opacity: ${grayscaleServicesDim}%;`
+  const graysacleServices = `filter: grayscale(1);
+  opacity: ${grayscaleServicesDim}%;`;
 
-  return vertical
+  const sizeDragArea = showDragArea ? verticalStyleOffset : 0;
+  return horizontal
     ? `
     .sidebar {
       height: ${width}px !important;
@@ -247,7 +249,17 @@ function generateServiceRibbonWidthStyle(
       margin-top: -${width}px !important;
     }
     .darwin .sidebar {
-      height: ${width + sidebarSizeBias}px !important;
+      height: ${width + verticalStyleOffset - 3 - sizeDragArea}px !important;
+    }
+    .darwin .app .app__content {
+      padding-top: ${
+        width + sidebarSizeBias + (sizeDragArea !== 0 ? 4 - sizeDragArea : 4)
+      }px !important;
+    }
+    .darwin .workspaces-drawer {
+      margin-top: -${
+        width + verticalStyleOffset - 5 - sizeDragArea
+      }px !important;
     }
     .darwin .sidebar .sidebar__button--workspaces.is-active {
       height: ${width - sidebarSizeBias}px !important;
@@ -358,7 +370,7 @@ function generateStyle(settings) {
     grayscaleServicesDim,
     iconSize,
     showDragArea,
-    useVerticalStyle,
+    useHorizontalStyle,
     alwaysShowWorkspaces,
     showServiceName,
   } = settings;
@@ -372,17 +384,18 @@ function generateStyle(settings) {
   style += generateServiceRibbonWidthStyle(
     serviceRibbonWidth,
     iconSize,
-    useVerticalStyle,
+    useHorizontalStyle,
     showServiceName,
     sidebarServicesLocation,
     useGrayscaleServices,
     grayscaleServicesDim,
+    showDragArea,
   );
 
   if (showDragArea) {
     style += generateShowDragAreaStyle(accentColor);
   }
-  if (useVerticalStyle) {
+  if (useHorizontalStyle) {
     style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces);
   } else if (document.querySelector('#vertical-style')) {
     const link = document.querySelector('#vertical-style');
@@ -403,7 +416,7 @@ function updateProgressbar(settings) {
     barColors: {
       '0': settings.progressbarAccentColor,
     },
-    shadowBlur: 5
+    shadowBlur: 5,
   });
 }
 
@@ -429,7 +442,7 @@ export default function initAppearance(stores) {
       settings.all.app.sidebarServicesLocation,
       settings.all.app.useGrayscaleServices,
       settings.all.app.grayscaleServicesDim,
-      settings.all.app.useVerticalStyle,
+      settings.all.app.useHorizontalStyle,
       settings.all.app.alwaysShowWorkspaces,
       settings.all.app.showServiceName,
     ],