Expose sidebar widths through css variables

Use case or problem

currently, sidebars’ widths are only styled with inline styles. this makes it hard to try to match any other element’s width that are floating to the sidebars (namely the status bar). it would be great if the width of the sidebars was either mirrored to a (read-only) css variable, or applied with a css variable.

here’s me trying to make the status bar as long as the side ribbon:
image

obsidian 1.0.0 added a bunch of css variable that helped styling, and i think this addition would help a lot for theme devs.

Proposed solution

1. applying the widths through css variables (pseudo js, because i do not know the entire context of how dragging the resizer is handled)

const sidebarStyleTag = document.createElement("style")
// optionally add an id
document.head.appendChild(sidebarStyleTag )
const leftWidth = 280
const rightWidth = 280

function updateSidebarWidths(left, right) {
    sidebarStyleTag.innerHTML = `:root {
    --left-sidebar-width: ${left}px;
    --right-sidebar-width: ${right}px;
    }`
}

leftSideBar.ondrag = (event) => {
    leftWidth = event.newWidth //pseudocode
    updateSidebarWidths(leftWidth, rightWidth)
}
rightSideBar.ondrag = (event) => {
    rightWidth = event.newWidth //pseudocode
    updateSidebarWidths(leftWidth, rightWidth)
}
// + css code to apply the widths through the above defined css variables

2. mirroring the width to (read-only) css variable that can be referenced

const sidebarStyleTag = document.createElement("style")
// optionally add an id
document.head.appendChild(sidebarStyleTag )
const leftWidth = 280
const rightWidth = 280

function updateSidebarWidths(left, right) {
    sidebarStyleTag.innerHTML = `:root {
    --left-sidebar-width: ${left}px;
    --right-sidebar-width: ${right}px;
    }`
}

leftSideBar.ondrag = (event) => {
    event.target.style.width = event.newWidth
    leftWidth = event.newWidth //pseudocode
    updateSidebarWidths(leftWidth, rightWidth)
}
rightSideBar.ondrag = (event) => {
    event.target.style.width = event.newWidth
    rightWidth = event.newWidth //pseudocode
    updateSidebarWidths(leftWidth, rightWidth)
}
// in this scenario, no additional css code would be needed

in my opinion, 1. would be a more proper way to handle this.

Current workaround (optional)

lock the sidebar width or lock the status bar width/min-width (non ideal)

Related feature requests (optional)

(doesen’t apply)

1 Like