How to make the sidebar in a dashboard collapsed by default?

[pensivedog]

Description

I have a quarto website that contains several dashboards, on some of which I'd like to have sidebars. I've searched and can't find a working way to have the sidebars collapsed by default. I've tried the following, which does not work:

format:
  dashboard:
    sidebar:
      collapse: true

Is there any way to do something like the above or, even better, something like the below?

# {.sidebar data-collapsed="true" data-open="collapsed"}

[cderv]

We currently don't allow to customize the default state. It will be expanded by default

quarto-cli/src/format/dashboard/format-dashboard-sidebar.ts

Lines 129 to 143 in a2a22e5

	function sidebarToggle(id: string, doc: Document) {
	const html = `
	<button class="collapse-toggle" type="button" title="Toggle sidebar" aria-expanded="true" aria-controls="${id}">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="bi bi-chevron-left collapse-icon" style="fill:currentColor;" aria-hidden="true" role="img">
	<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
	</svg>
	</button>
	<script data-bslib-sidebar-init>
	bslib.Sidebar.initCollapsibleAll()
	</script>
	`;
	const container = doc.createElement("DIV");
	container.innerHTML = html;
	return container.childNodes;
	}

This means this is a feature request idea.

In the meantime you may be able to use JS on document loaded to change the default state of your sidebar I guess. But I don't know specifically how... 🤷‍♂️ Sorry.

[pensivedog]

Thank you for the reply. I tried to do this with JS but could only make it work by toggling it to closed on page load, which causes a rather unpleasant FOUC. I'll add it as a feature request.

[pensivedog]

Feature request #11165 created.