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

Dash Python
22

This doesnt work for me.
Best regards, Clemens

23

@cosco What about it doesn’t work? Can you provide a code snippet of what your attempting to do?

24

Hi everyone,
I just wanted to add my approach to this navbar. It uses mainly Mantine and a little bit of CSS. You can find a working example here. (Will take some time to spin up). Can find the code here. And for a brief step-by-step explanation find here

The approach is simple, added two buttons, one for the Navbar other for the Drawer. Both are components in Mantine. And using Media queries to adjust both buttons’ views. As far as CSS is concerned only to provide a hover effect to the navbar.

4 Likes
25

Hey @abhinva Thanks for sharing!

@tphil10 - this looks like it would make a great addition to dmc building blocks!

image
image726×448 5.03 KB

image
image984×575 17 KB

3 Likes
26

Hello tphil10,
I tried adding a Side-Navbar with icons and when I hover on one of the Icons the navbar opens on the side showing various options to chose from.

Best Regards,
Clemens

27

@cosco Depending on which of the navbar examples you are looking at, at least one of them is designed to do that. Are you expecting something else to happen?

28

Hello tphil10 . Now some weeks later I finally figured mechanics out in this framework. It works fine now. Thank you for the help. Best Regards, Clemens

29

Thanks for sharing…Very useful.
Cheers.
Mukesh Makwana

1 Like
30

Hey everyone. Was looking at this forum and was interested in implementing what @abhinva showcased, however mantine 0.15 doesn’t have the navbar component anymore, and everything is now handled by AppShell. Any pointers on how to implement this on the new paradigm?

Thanks in advance.

31

Hi @SpanishHans and welcome to the Dash community :slightly_smiling_face:

Have you tried dmc.AppShellNavbar?

Check out this section of the docs. It was recently updated and includes 8 examples of responsive sidebars

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