Dash mantine components Aside

Dash Python
1

Hello community,

Does anyone have an example code for a Dash app which utilizes the DMC Aside element - which contains more than 2 links within it, and points to different sections in a page?

2

Hi @deepa-shalini

Here is a minimal example with AppShell and links to sections on a page.

To link to a section, give it an id, the the link is html.A("my link", href="#myid")

import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, _dash_renderer, dcc, callback, Input, Output, State, html

_dash_renderer._set_react_version("18.2.0")

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

theme_toggle = dmc.ActionIcon(
    [
        dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
        dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),
    ],
    variant="transparent",
    color="yellow",
    id="color-scheme-toggle",
    size="lg",
    ms="auto",
)

header = dmc.Group(
    [
        dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
        dmc.Text(["Header"], size="xl", fw=700),
        theme_toggle
    ],
    justify="flex-start",
    h=70
)

navbar = dcc.Loading(
    dmc.ScrollArea(
        [
            dmc.Text("Your Sidebar content", fw=700),
        ],
        offsetScrollbars=True,
        type="scroll",
        style={"height": "100%"},
    ),
)

page_content = [
    dmc.Text(
        "Section 1",
        id="section1", h=500,
        style={"scrollMarginTop": "80px"} # offset for header height
    ),
    dmc.Loader(color="red", size="md", variant="oval", h=500),
    dmc.Text("Section 2", id="section2", h=500),

]

aside= [
    html.A("section 1", href="#section1"),
    html.A("section 2", href="#section2"),
]

app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader(header, px=25),
        dmc.AppShellNavbar(navbar, p=24),
        dmc.AppShellAside(aside, withBorder=False),
        dmc.AppShellMain(page_content),
        dmc.AppShellFooter("Footer")
    ],
    header={"height": 70},
    padding="xl",
    navbar={
        "width": 375,
        "breakpoint": "md",
        "collapsed": {"mobile": True},
    },
    aside={
        "width": 300,
        "breakpoint": "xl",
        "collapsed": {"desktop": False, "mobile": True},
    },
    id="app-shell",
)

app.layout = dmc.MantineProvider(
    [
        dcc.Store(id="theme-store", storage_type="local", data="light"),
        app_shell
    ],
    id="mantine-provider",
    forceColorScheme="light",
)


@callback(
    Output("app-shell", "navbar"),
    Input("burger-button", "opened"),
    State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
    navbar["collapsed"] = {"mobile": not opened}
    return navbar


@callback(
    Output("mantine-provider", "forceColorScheme"),
    Input("color-scheme-toggle", "n_clicks"),
    State("mantine-provider", "forceColorScheme"),
    prevent_initial_call=True,
)
def switch_theme(_, theme):
    return "dark" if theme == "light" else "light"



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

See app live here:

1 Like
3

Wow! Thank you so much @AnnMarieW :pray:t5::star_struck:. This is exactly what I was looking for! Thank you for taking the time out to share this code. You’re a STAR! :heart::pray:t5:

1 Like