I’ve accomplished a workaround using js:
/* JavaScript namespaces */
if (!window.dash_clientside) {
window.dash_clientside = {};
}
window.dash_clientside.clientside = {
// set width of sidebar when any submenu is toggled
enlarge: function(is_open, id) {
if (id){
if (is_open.includes(true)) {
document.getElementById(id).style.width = '35rem';
} else {
document.getElementById(id).style.width = '25rem';
}
}
return window.dash_clientside.no_update;
},
and its callback:
# make sidebar wider as long as any submenu is open
app.clientside_callback(
ClientsideFunction(namespace="clientside", function_name="enlarge"),
Output('dummy-sidebar', 'children'),
[Input({'type': "submenu-collapse", 'index': ALL}, 'is_open')],
[State('sidebar', 'id')]
)