diasbaskara/userscripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add overlay to close sidebar on outside click

Browse Source 
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.
This commit is contained in:
Dias Baskara
2025-11-26 10:49:30 +07:00
parent b38ee62ef9
commit b43fae30b1
1 changed files with 26 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
coretabs.user.js
View File

@@ -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";
}
});
}