Sidebar css confusion

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')]
        )