From 37f5756ddb031ab1f9f85dd45dbd2cccdc8d2a74 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Sat, 14 Dec 2024 15:26:31 +0100
Subject: [PATCH] Added right side compact mode animations

---
 .../base/zen-components/ZenCompactMode.mjs    | 65 ++++++++++---------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/browser/base/zen-components/ZenCompactMode.mjs b/src/browser/base/zen-components/ZenCompactMode.mjs
index 5449e3b1a..0899054cb 100644
--- a/src/browser/base/zen-components/ZenCompactMode.mjs
+++ b/src/browser/base/zen-components/ZenCompactMode.mjs
@@ -37,7 +37,8 @@ var gZenCompactModeManager = {
     if (this._sidebarIsOnRight) {
       return this._sidebarIsOnRight;
     }
-    return Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
+    this._sidebarIsOnRight = Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
+    return this._sidebarIsOnRight;
   },
 
   get sidebar() {
@@ -105,42 +106,46 @@ var gZenCompactModeManager = {
     this._isAnimating = true;
     if (canHideSidebar && isCompactMode) {
       window.requestAnimationFrame(() => {
-        this.sidebar.style.position = "relative";
-        this.sidebar.style.transition = "margin-left .3s ease";
-        this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
-        this.sidebar.style.pointerEvents = "none";
-        this.sidebar.style.opacity = "0";
+        window.requestAnimationFrame(() => {
+          this.sidebar.style.position = "relative";
+          this.sidebar.style.transition = "margin-left .3s ease";
+          this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
+          this.sidebar.style.pointerEvents = "none";
+          this.sidebar.style.opacity = "0";
 
-        setTimeout(() => {
-          window.requestAnimationFrame(() => {
-            this._isAnimating = false;
-            this.sidebar.style.removeProperty("position");
-            this.sidebar.style.removeProperty("transition");
-            this.sidebar.style.removeProperty("margin-left");
-            this.sidebar.style.removeProperty("pointer-events");
-            this.sidebar.style.removeProperty("opacity");
-          });
-        }, 300);
+          setTimeout(() => {
+            window.requestAnimationFrame(() => {
+              this._isAnimating = false;
+              this.sidebar.style.removeProperty("position");
+              this.sidebar.style.removeProperty("transition");
+              this.sidebar.style.removeProperty("margin-left");
+              this.sidebar.style.removeProperty("pointer-events");
+              this.sidebar.style.removeProperty("opacity");
+            });
+          }, 300);
+        });
       });
     } else if (canHideSidebar && !isCompactMode) {
       // we are in compact mode and we are exiting it
-      this.sidebar.style.marginLeft = `calc(-1 * ${this.sidebar.getAttribute("width")}px)`;
+      this.sidebar.style.marginLeft = `${(this.sidebarIsOnRight ? 1 : -1) * this.sidebar.getAttribute("width")}px`;
 
       window.requestAnimationFrame(() => {
-        this.sidebar.style.position = "relative";
-        this.sidebar.style.transition = "margin-left .3s ease";
-        this.sidebar.style.marginLeft = "0";
-        this.sidebar.style.pointerEvents = "none";
+        window.requestAnimationFrame(() => {
+          this.sidebar.style.position = "relative";
+          this.sidebar.style.transition = "margin-left .3s ease";
+          this.sidebar.style.marginLeft = "0";
+          this.sidebar.style.pointerEvents = "none";
 
-        setTimeout(() => {
-          window.requestAnimationFrame(() => {
-            this._isAnimating = false;
-            this.sidebar.style.removeProperty("position");
-            this.sidebar.style.removeProperty("transition");
-            this.sidebar.style.removeProperty("margin-left");
-            this.sidebar.style.removeProperty("pointer-events");
-          });
-        }, 300);
+          setTimeout(() => {
+            window.requestAnimationFrame(() => {
+              this._isAnimating = false;
+              this.sidebar.style.removeProperty("position");
+              this.sidebar.style.removeProperty("transition");
+              this.sidebar.style.removeProperty("margin-left");
+              this.sidebar.style.removeProperty("pointer-events");
+            });
+          }, 300);
+        });
       });
     }
   },