From ca6687208bcd8f2d67af6616a501c71ba1054712 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 30 Nov 2024 01:20:47 +0200
Subject: [PATCH] feat(client): move toggle sidebar to tab bar on horizontal
 layout

---
 src/public/app/layouts/desktop_layout.js           |  2 +-
 src/public/app/widgets/buttons/left_pane_toggle.js |  2 +-
 src/public/stylesheets/style.css                   | 10 ++++++++++
 src/public/stylesheets/theme-next.css              |  4 ++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js
index 7f2156c01..995654f4c 100644
--- a/src/public/app/layouts/desktop_layout.js
+++ b/src/public/app/layouts/desktop_layout.js
@@ -101,6 +101,7 @@ export default class DesktopLayout {
             .class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
             .optChild(launcherPaneIsHorizontal, new FlexContainer('row')
                 .class("tab-row-container")
+                .child(new LeftPaneToggleWidget(true))
                 .child(new TabRowWidget().class("full-width"))
                 .child(new TitleBarButtonsWidget())
                 .css('height', '40px')
@@ -244,7 +245,6 @@ export default class DesktopLayout {
             launcherPane = new FlexContainer("row")
                 .css("height", "53px")
                 .class("horizontal")
-                .child(new LeftPaneToggleWidget(true))
                 .child(new LauncherContainer(true))
                 .child(new GlobalMenuWidget(true))
         } else {
diff --git a/src/public/app/widgets/buttons/left_pane_toggle.js b/src/public/app/widgets/buttons/left_pane_toggle.js
index f03d2dcd5..b3b0e1f3a 100644
--- a/src/public/app/widgets/buttons/left_pane_toggle.js
+++ b/src/public/app/widgets/buttons/left_pane_toggle.js
@@ -7,7 +7,7 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
     constructor(isHorizontalLayout) {
         super();
 
-        this.class("launcher-button");
+        this.class(isHorizontalLayout ? "toggle-button" : "launcher-button");
 
         this.settings.icon = () => options.is('leftPaneVisible')
             ? "bx-chevrons-left"
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 97d24ec1e..cb8cdd1aa 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1269,3 +1269,13 @@ textarea {
     color: var(--muted-text-color);
 }
 
+.tab-row-container .toggle-button {
+    background: transparent;
+    appearance: none;
+    border: 0;
+    width: 24px;
+    height: 24px;
+    color: var(--launcher-pane-text-color);
+    margin: 8px 10px;    
+    font-size: 18px;
+}
diff --git a/src/public/stylesheets/theme-next.css b/src/public/stylesheets/theme-next.css
index b0661215e..686609822 100644
--- a/src/public/stylesheets/theme-next.css
+++ b/src/public/stylesheets/theme-next.css
@@ -614,6 +614,10 @@ html body #left-pane .quick-search:focus-within .search-button:hover,
     height: var(--tab-bar-height) !important;
 }
 
+.tab-row-container .toggle-button {
+    margin: 13px 10px !important;
+}
+
 .tab-row-widget-container {
     margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2);
     height: var(--tab-height) !important;