1 files changed, 24 insertions, 18 deletions
diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 14a1ebd..124636a 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -1,3 +1,4 @@
+import type SideBar from "@/modules/sidebar";
 import type { Monitor } from "@/services/monitors";
 import Players from "@/services/players";
 import Updates from "@/services/updates";
@@ -72,10 +73,19 @@ const togglePopup = (self: JSX.Element, event: Astal.ClickEvent, name: string) =
     }
 };
 
+const switchPane = (name: string) => {
+    const sidebar = App.get_window("sidebar") as SideBar | null;
+    if (sidebar) {
+        if (sidebar.visible && sidebar.shown.get() === name) sidebar.hide();
+        else sidebar.show();
+        sidebar.shown.set(name);
+    }
+};
+
 const OSIcon = () => (
     <button
         className="module os-icon"
-        onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "sideleft")}
+        onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("dashboard")}
     >
         {osIcon}
     </button>
@@ -128,10 +138,9 @@ const MediaPlaying = () => {
         players.lastPlayer ? `${players.lastPlayer.title} - ${players.lastPlayer.artist}` : fallback;
     return (
         <button
-            onClick={(self, event) => {
-                if (event.button === Astal.MouseButton.PRIMARY) {
-                    togglePopup(self, event, "media");
-                } else if (event.button === Astal.MouseButton.SECONDARY) players.lastPlayer?.play_pause();
+            onClick={(_, event) => {
+                if (event.button === Astal.MouseButton.PRIMARY) switchPane("audio");
+                else if (event.button === Astal.MouseButton.SECONDARY) players.lastPlayer?.play_pause();
                 else if (event.button === Astal.MouseButton.MIDDLE) players.lastPlayer?.raise();
             }}
             setup={self => {
@@ -252,16 +261,15 @@ const Tray = () => (
 
 const Network = () => (
     <button
-        onClick={(self, event) => {
+        onClick={(_, event) => {
             const network = AstalNetwork.get_default();
-            if (event.button === Astal.MouseButton.PRIMARY) {
-                togglePopup(self, event, "networks");
-            } else if (event.button === Astal.MouseButton.SECONDARY) network.wifi.enabled = !network.wifi.enabled;
+            if (event.button === Astal.MouseButton.PRIMARY) switchPane("connectivity");
+            else if (event.button === Astal.MouseButton.SECONDARY) network.wifi.enabled = !network.wifi.enabled;
             else if (event.button === Astal.MouseButton.MIDDLE)
                 execAsync("uwsm app -- gnome-control-center wifi").catch(() => {
                     network.wifi.scan();
                     execAsync(
-                        "uwsm app -- foot -T nmtui fish -c 'sleep .1; set -e COLORTERM; TERM=xterm-old nmtui connect'"
+                        "uwsm app -- foot -T nmtui -- fish -c 'sleep .1; set -e COLORTERM; TERM=xterm-old nmtui connect'"
                     ).catch(() => {}); // Ignore errors
                 });
         }}
@@ -357,8 +365,8 @@ const Network = () => (
 const BluetoothDevice = (device: AstalBluetooth.Device) => (
     <button
         visible={bind(device, "connected")}
-        onClick={(self, event) => {
-            if (event.button === Astal.MouseButton.PRIMARY) togglePopup(self, event, "bluetooth-devices");
+        onClick={(_, event) => {
+            if (event.button === Astal.MouseButton.PRIMARY) switchPane("connectivity");
             else if (event.button === Astal.MouseButton.SECONDARY)
                 device.disconnect_device((_, res) => device.disconnect_device_finish(res));
             else if (event.button === Astal.MouseButton.MIDDLE)
@@ -377,8 +385,8 @@ const BluetoothDevice = (device: AstalBluetooth.Device) => (
 const Bluetooth = () => (
     <box vertical={bind(config.vertical)} className="bluetooth">
         <button
-            onClick={(self, event) => {
-                if (event.button === Astal.MouseButton.PRIMARY) togglePopup(self, event, "bluetooth-devices");
+            onClick={(_, event) => {
+                if (event.button === Astal.MouseButton.PRIMARY) switchPane("connectivity");
                 else if (event.button === Astal.MouseButton.SECONDARY) AstalBluetooth.get_default().toggle();
                 else if (event.button === Astal.MouseButton.MIDDLE)
                     execAsync("uwsm app -- blueman-manager").catch(console.error);
@@ -429,7 +437,7 @@ const StatusIcons = () => (
 
 const PkgUpdates = () => (
     <button
-        onClick={(self, event) => event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "updates")}
+        onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("packages")}
         setup={self =>
             setupCustomTooltip(
                 self,
@@ -446,9 +454,7 @@ const PkgUpdates = () => (
 
 const NotifCount = () => (
     <button
-        onClick={(self, event) =>
-            event.button === Astal.MouseButton.PRIMARY && togglePopup(self, event, "notifications")
-        }
+        onClick={(_, event) => event.button === Astal.MouseButton.PRIMARY && switchPane("notifpane")}
         setup={self =>
             setupCustomTooltip(
                 self,