Sidebar with icons - expands on hover (and other cool sidebars)

Dash Python
9

@IvanLiu Ah, my bad, realizing the topic header says “expands on hover” lol. My solution expands on window resize, not hover.

As for the container, I created a container that had a margin-left equal to the width of the sidebar.

app.layout = dmc.MantineProvider(
        theme={
            'fontFamily': '"Inter", sans-serif'
        },
        withGlobalStyles=True,
        withNormalizeCSS=True,
        children=[
            dcc.Location(id='url', refresh=False),
            dmc.NotificationsProvider([
                head,
                dmc.MediaQuery([navbar], smallerThan="md", styles={'display': 'none'}),
                dmc.MediaQuery([smaller_navbar], largerThan="md", styles={'display': 'none'}),
                dmc.Container(
                    [dash.page_container],
                    id="page-container",
                    ml="250px",
                    p="1rem",
                    fluid=True
                )
        ], position="top-center")
        ],
)

This is what my full app layout looks like, the dash.page_container is the convention from dash new multipage solution. The margin-left is probably a bit noobish but it works for me. If anyone else has another way of doing it i’d love to know.

2 Likes