Permanently anchor both sidebar toggle buttons

[anon67375203]

Use case or problem

With the option to disable the ribbon menu outright, the left sidebar toggle button has now become a moving click target — needlessly switching its position between the sidebar and workspace. This has long been the case with the right sidebar, and how its button moves every time it opens and closes (unless the window frame style is set to ‘Obsidian frame’).

Hidden/Default Frame, Ribbon Enabled

Hidden/Default Frame, Ribbon Disabled

Obsidian Frame, Ribbon Enabled

Obsidian Frame, Ribbon Disabled

Proposed solution

Permanently affix these buttons to its respective corners.

I suggest that these buttons be moved under titlebar-button-container (the same ones holding the OS min/max/close buttons), if not a new and similarly anchored <div> class. Below is a proof of concept of just that.

Buttons Under titlebar-button-container

Current workaround (optional)

N/A

Related feature requests (optional)

Obsidian Interface: Sidebar Toggle Controls

Problem This is the current sidebar layout: [2024_01_21 11_14 AM Office Lens~3] The sidebar toggle controls are disconnected from the intuitive rectangle space of the sidebar. The sidebar icon itself does not give any indication of movement. On the right sidebar, the icon is visually cut off by a separator. Many plugins using the right sidebar must include a disclaimer about where to find their interface - users don’t know the right sidebar exists. Solution Move the sidebar toggle control a…

[Abisheik]

I felt the same way plus wanted to hide the ribbon when the sidebar is closed, but show it when the sidebar is visible. So I added this bit of JavaScript to a script I have set to run when Obsidian starts up using QuickAdd.

if (!this.app.isMobile) {
	const leftsidebarbutton = document.getElementsByClassName("sidebar-toggle-button mod-left");

	async function syncribbon() {
		this.app.vault.setConfig("showRibbon", !this.app.workspace.leftSplit.collapsed),
		this.app.updateRibbonDisplay(),
		this.app.workspace.updateFrameless()
	}

	for(let i=0; i < leftsidebarbutton.length; i++) {   
		leftsidebarbutton[i].addEventListener("click", function() {
				syncribbon();
		}, {passive: true})
	};
}