From 2418d8ed5206e07ece5abd2f1ef73a796c259d54 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Tue, 3 Jun 2025 23:19:45 -0700
Subject: [PATCH] Fix: The 1 px gap that would show up when the bar was hidden.
 (#996)

---
 src/components/bar/layout/BarLayout.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/bar/layout/BarLayout.tsx b/src/components/bar/layout/BarLayout.tsx
index 9b1c17c..6e97ddf 100644
--- a/src/components/bar/layout/BarLayout.tsx
+++ b/src/components/bar/layout/BarLayout.tsx
@@ -79,7 +79,9 @@ export class BarLayout {
                 visible={this._visibilityVar()}
                 anchor={this._anchorVar()}
                 layer={this._layerVar()}
-                exclusivity={Astal.Exclusivity.EXCLUSIVE}
+                exclusivity={bind(this._visibilityVar).as((visible) =>
+                    visible ? Astal.Exclusivity.EXCLUSIVE : Astal.Exclusivity.NORMAL,
+                )}
                 onDestroy={() => this._cleanup()}
             >
                 <box className="bar-panel-container">
@@ -118,11 +120,6 @@ export class BarLayout {
     private _initializeVisibilityVariables(): void {
         const { layouts } = options.bar;
 
-        this._visibilityVar = Variable.derive([bind(layouts)], (currentLayouts) => {
-            const foundLayout = getLayoutForMonitor(this._hyprlandMonitor, currentLayouts);
-            return !isLayoutEmpty(foundLayout);
-        });
-
         this._classNameVar = Variable.derive([bind(layouts)], (currentLayouts) => {
             const foundLayout = getLayoutForMonitor(this._hyprlandMonitor, currentLayouts);
             return !isLayoutEmpty(foundLayout) ? 'bar' : '';
@@ -180,6 +177,17 @@ export class BarLayout {
             middle: this._createSectionBinding('middle'),
             right: this._createSectionBinding('right'),
         };
+
+        this._visibilityVar = Variable.derive(
+            [
+                bind(this._barSectionsVar.left),
+                bind(this._barSectionsVar.middle),
+                bind(this._barSectionsVar.right),
+            ],
+            (left, middle, right) => {
+                return left.length > 0 || middle.length > 0 || right.length > 0;
+            },
+        );
     }
 
     private _createSectionBinding(section: 'left' | 'middle' | 'right'): Variable<JSX.Element[]> {