Sidebar css confusion

Dash Python
1

I have a sidebar with some navigation sub menus in dcc.Cards that I want to expand sideways when opened.
Two things come in mind:

  1. make sidebar larger when sub menu is toggled which I’m trying with the provided code
  2. make sub menu card larger. Which I couldn’t get going because for this the card div should be able to overlap its parent
import dash
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

sidebar_header = [
    dbc.Row([
        dbc.Col([
            html.Button(
                html.Span(className="navbar-toggler-icon"),
                className="navbar-toggler", id="navbar-toggle")],
            width="auto", align="center")])
]
            
navigation = [
    html.Li(
        dbc.Row([
            dbc.Col("Menu"),
            dbc.Col(html.I(className="fas fa-chevron-right mr-3"), width="auto")], className="my-1"), id="submenu"),
        dbc.Collapse([dbc.Card(dbc.CardBody('text'))], id="submenu-collapse")
]

app.layout = html.Div([
    html.Div(sidebar_header),
    dbc.Collapse(
        dbc.Nav(navigation, vertical=True), id="collapse")
], id="sidebar")


@app.callback(Output("submenu-collapse", "className"),
             [Input("submenu-collapse", "is_open")],
             [State("submenu-collapse", "className")])
def toggle_classname_collapse(is_open, classname):
    if is_open and classname == "":
        return "collapsed"
    return ""


@app.callback(Output("submenu", "className"),
              [Input("submenu-collapse", "is_open")])
def toggle_classname_open(is_open):
    if is_open:
        return "open"
    return ""


@app.callback(Output("submenu-collapse", "is_open"),
              [Input("submenu", "n_clicks")],
              [State("submenu-collapse", "is_open")],)
def toggle_collapse(n, is_open):
    if n:
        return not is_open
    return is_open
          

if __name__ == '__main__':
    app.run_server(debug=True)

assets/styles.css:

/* Sidebar init */
#sidebar {
  z-index: 1;
  text-align: center;
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  overflow-Y: auto;
}

/* sidebar heading */
#sidebar h2 {
  text-align: left;
  margin-bottom: 0;
}


/* media rule applies when (...) criterion is met*/
@media (min-width: 48em) {
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 25rem;
    text-align: left;
    transition: all 0.6s ease-in-out;
  }


  /* reveal the blurb on a large screen */
  /* whatever the blurb is */
  #blurb {
    display: block;
  }

  /* Hide the toggle on a large screen */
  #navbar-toggle {
    display: none;
  }

  /* sub menus other than log */
  #collapse {
    display: block;
  }
}

/* sets the duration of the rotation */
.fa-chevron-right {
  transition: transform 0.2s ease-in-out 0s;
}

/* rotate the chevron when the open class is applied */
li.open .fa-chevron-right {
  transform: rotate(90deg);
}

/* submenu items */
.nav li {
  font-size: 18px;
}


#submenu-collapse {
  transition:all 0.3s ease-in-out;
}

#submenu-collapse.collapsed {
  margin-right: -15rem;
}

#submenu-collapse.collapsed #sidebar {
  width: 45rem;
}
2

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