Py.Cafe

amward/

dash-dmc-multi-page-app

Multi-Page App with Dash and DMC

DocsPricing
  • pages/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import dash
import dash_mantine_components as dmc

from dash import Dash, _dash_renderer, dcc, page_container, get_relative_path

_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL, use_pages=True)


links = dmc.Stack(
    [
        dmc.Anchor(f"{page['name']}", href=page["relative_path"])
        for page in dash.page_registry.values()
        if page["module"] != "pages.not_found_404"
    ]
)

link = dmc.Anchor("Another Page 2 link", href=get_relative_path("/page-2"))

navbar = dmc.Stack([
    links,
    link
], p=20)


app_shell = dmc.AppShell(
    [
        dmc.AppShellHeader("My Header", p=25),
        dmc.AppShellNavbar([navbar]),
        dmc.AppShellMain(page_container, pt=70),

    ],
    header={"height": 70},
    navbar={"width": 200},
    padding="xl",
    id="app-shell",
)

app.layout = dmc.MantineProvider(
    [
        app_shell
    ],

)



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