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

Dash Python
32

Hey there, thanks for you quick reply!

Yeah, after some thinkering around i got this:

app = Dash(external_stylesheets = dmc.styles.ALL)
server = app.server

theme_toggle = dmc.Switch(
    offLabel=DashIconify(
        icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]
    ),
    onLabel=DashIconify(
        icon="radix-icons:moon",
        width=15,
        color=dmc.DEFAULT_THEME["colors"]["yellow"][6],
    ),
    id="color-scheme-toggle",
    persistence=True,
    color="grey",
)

app.layout = dmc.MantineProvider(
    [
        dmc.AppShell(
            [
                dmc.AppShellHeader(
                    dmc.Group(
                        [
                            dmc.Image(src=LOGO_IIP),
                            dmc.Title("App Name"),
                        ],
                        h="100%",
                        px="md",
                    )
                ),
                dmc.AppShellNavbar(
                    id="navbar",
                    children=[
                        dmc.Stack(
                            [
                                dmc.NavLink(
                                    label="Home",
                                    leftSection=get_icon(icon="fa-solid:building"),
                                    active=True,
                                    variant="filled",
                                    href="/",
                                ),
                                dmc.NavLink(
                                    label="Page 2",
                                    leftSection=get_icon(icon="fa6-solid:chart-simple"),
                                    variant="filled",
                                    href="/dashboards",
                                ),
                                dmc.NavLink(
                                    label="Page 3",
                                    leftSection=get_icon(icon="fa6-solid:magnifying-glass"),
                                    variant="filled",
                                    href="/explorador",
                                ),
                                dmc.NavLink(
                                    label="Page 4",
                                    leftSection=get_icon(icon="fa-solid:wrench"),
                                    variant="filled",
                                    href="/herramientas",
                                ),
                                theme_toggle
                            ],
                        justify="space-between"
                        )
                    ],
                    p="md",
                ),
                dmc.AppShellMain([
                    "Main",
                    dmc.Affix(
                        children=[
                            dmc.Burger(
                                id="mobile-burger",
                                size="sm",
                                hiddenFrom="sm",
                                opened=False,
                            ),
                            dmc.Burger(
                                id="desktop-burger",
                                size="sm",
                                visibleFrom="sm",
                                opened=True,
                            ),
                        ],
                        position={"bottom": 20, "left": 20}
                    )
                ]),
            ],
            #layout="alt",
            header={"height": 80},
            padding="md",
            navbar={
                "width": 70,
                "breakpoint": "sm",
                "collapsed": {"mobile": True},
            },
            id="appshell",
        )
    ],
    id="mantine-provider",
    forceColorScheme="light",
)


@callback(
    Output("appshell", "navbar"),
    Input("mobile-burger", "opened"),
    Input("desktop-burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(mobile_opened, desktop_opened, navbar):
    navbar["collapsed"] = {
        "mobile": not mobile_opened,
        "desktop": not desktop_opened,
    }
    return navbar


clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-toggle", "id"),
    Input("color-scheme-toggle", "checked"),
)

if __name__ == "__main__":
    app.run_server(debug=True, host='0.0.0.0', port=1234)

Using only:

#navbar {
    transition: width 0.2s ease-in-out;
}

#navbar:hover {
    width: 300px !important;
}

@media (max-width: 768px) {
    #navbar:hover {
        width: 100% !important;
    }
}

Any pointers on a better implementation are welcome,

Hope this is useful for anyone.

2 Likes