QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-13 09:07:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui(sidebars): add subtle vertical separators and improve sidebar collapse behavior (#1416)

Browse Source 
* ui(sidebars): add subtle vertical separators and improve sidebar collapse behavior

* ui(sidebars): stabilize vertical separators and refine layout transitions

* ui(sidebars): make settings sidebar dynamic and fix theme-switching border persistence

* ui(sidebars): improve accessibility by toggling inert attribute on collapse

* ui(sidebars): eliminate ghost borders on collapse by precisely toggling width classes

* ui(sidebars): use semantic border-divider token
This commit is contained in:
Louis
2026-04-11 19:33:30 +02:00
committed by GitHub
parent 0ffd911ea0
commit 9d3553f8c9
3 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/controllers/app_layout_controller.js
View File

@@ -21,22 +21,27 @@ export default class extends Controller {
toggleLeftSidebar() {
const isOpen = this.leftSidebarTarget.classList.contains("w-full");
this.#updateUserPreference("show_sidebar", !isOpen);
this.#toggleSidebarWidth(this.leftSidebarTarget, isOpen);
this.#toggleSidebarWidth(this.leftSidebarTarget, isOpen, "left");
}
toggleRightSidebar() {
const isOpen = this.rightSidebarTarget.classList.contains("w-full");
this.#updateUserPreference("show_ai_sidebar", !isOpen);
this.#toggleSidebarWidth(this.rightSidebarTarget, isOpen);
this.#toggleSidebarWidth(this.rightSidebarTarget, isOpen, "right");
}
#toggleSidebarWidth(el, isCurrentlyOpen) {
#toggleSidebarWidth(el, isCurrentlyOpen, side) {
const expandedClasses = side === "left" ? [...this.expandedSidebarClasses, "border-r"] : [...this.expandedSidebarClasses, "border-l"];
const collapsedClasses = side === "left" ? [...this.collapsedSidebarClasses, "border-r-0"] : [...this.collapsedSidebarClasses, "border-l-0"];
if (isCurrentlyOpen) {
el.classList.remove(...this.expandedSidebarClasses);
el.classList.add(...this.collapsedSidebarClasses);
el.classList.remove(...expandedClasses);
el.classList.add(...collapsedClasses);
el.inert = true;
} else {
el.classList.add(...this.expandedSidebarClasses);
el.classList.remove(...this.collapsedSidebarClasses);
el.classList.add(...expandedClasses);
el.classList.remove(...collapsedClasses);
el.inert = false;
}
}