Auto-collapse Sidebar by Default Except on Workspace – Best Practice in Frappe v15?

, ,
1

Hi everyone,

I’m currently trying to customize the sidebar behavior in Frappe v15.

My goal is:

  • The sidebar should be collapsed by default on all pages
  • Except on the Workspace page, where it should remain expande

So far, I’ve tried two approaches:

  1. Triggering the sidebar toggle button programmatically using click()

  2. Manually adding the .sidebar-collapsed class to the sidebar wrapper

Both approaches seem to work, but I’m not sure if these are the recommended or cleanest ways to achieve this in Frappe v15.

My questions:

  • Is there a more proper or official way to control the sidebar’s default state?

  • Is there a built-in method or lifecycle hook that should be used instead?

  • Or is modifying the DOM / toggling classes the correct approach for this case?

I want to make sure I’m following best practices and not breaking anything internally.

Any guidance would be appreciated. Thank you!

2

There’s no official API for sidebar control in Frappe v15, but here’s the confirmed working fix

.layout-side-section
.collapsed
.sidebar-toggle

add in app.js or Custom Script:

frappe.ready(function () {
$(document).on(‘page-change’, function () {
const route = frappe.get_route();
const isWorkspace = route && route[0] === ‘Workspaces’;

const sidebar = document.querySelector('.layout-side-section');
const toggleBtn = document.querySelector('.sidebar-toggle');

if (!sidebar || !toggleBtn) return;

if (isWorkspace) {
    if (sidebar.classList.contains('collapsed')) {
        toggleBtn.click(); // expand
    }
} else {
    if (!sidebar.classList.contains('collapsed')) {
        toggleBtn.click(); // collapse
    }
}

});
});