From b43fae30b1138f1055c292b2c6033a26ffc50b01 Mon Sep 17 00:00:00 2001
From: Dias Baskara <25913324+diasbaskara@users.noreply.github.com>
Date: Wed, 26 Nov 2025 10:49:30 +0700
Subject: [PATCH] Add overlay to close sidebar on outside click

Introduced a transparent overlay that appears when the sidebar is open, allowing users to close the sidebar by clicking outside of it. This improves usability by providing a more intuitive way to dismiss the sidebar.
---
 coretabs.user.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/coretabs.user.js b/coretabs.user.js
index dec19c9..3c8065d 100644
--- a/coretabs.user.js
+++ b/coretabs.user.js
@@ -57,6 +57,7 @@
   function addStyles() {
     GM_addStyle(`
             #ct-sidebar{position:fixed;top:100px;right:-950px;width:950px;height:80vh;max-height:800px;background-color:#f9f9f9;border:1px solid #ccc;border-radius:8px 0 0 8px;box-shadow:-3px 0 8px rgba(0,0,0,.15);z-index:2147483647;transition:right .4s ease-in-out;display:flex;flex-direction:column;font-family:sans-serif}#ct-sidebar.open{right:0}#ct-sidebar-toggle{position:absolute;top:50%;right:950px;transform:translateY(-50%);width:30px;height:80px;background-color:#0056b3;color:#fff;border:none;border-radius:8px 0 0 8px;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:1px}
+            .ct-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:2147483646;display:none}
             #ct-header-area { padding: 12px 15px; background-color: #343a40; color: white; flex-shrink: 0; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #495057; }
             #ct-header-icon { flex-shrink: 0; }
             #ct-header-icon svg { width: 32px; height: 32px; fill: #e9ecef; }
@@ -127,6 +128,11 @@
         `;
     // Append to document.body (we are running only in top window so this is safe)
     document.body.appendChild(sidebarContainer);
+
+    // Create overlay for click-outside functionality
+    const overlay = document.createElement("div");
+    overlay.className = "ct-overlay";
+    document.body.appendChild(overlay);
   }
 
   // --- RENDER FUNCTIONS ---
@@ -944,7 +950,26 @@
     if (toggleBtn) {
       toggleBtn.addEventListener("click", () => {
         const sidebar = document.getElementById("ct-sidebar");
-        if (sidebar) sidebar.classList.toggle("open");
+        const overlay = document.querySelector(".ct-overlay");
+        if (sidebar) {
+          sidebar.classList.toggle("open");
+          if (overlay)
+            overlay.style.display = sidebar.classList.contains("open")
+              ? "block"
+              : "none";
+        }
+      });
+    }
+
+    // Add click outside handler
+    const overlay = document.querySelector(".ct-overlay");
+    if (overlay) {
+      overlay.addEventListener("click", () => {
+        const sidebar = document.getElementById("ct-sidebar");
+        if (sidebar && sidebar.classList.contains("open")) {
+          sidebar.classList.remove("open");
+          overlay.style.display = "none";
+        }
       });
     }