from dash import Dash, html, dcc, Input, Output, callback
import dash_mantine_components as dmc
import dash
from pages import page1, page2
dash._dash_renderer._set_react_version("18.2.0")
app = Dash(
__name__,
external_stylesheets=dmc.styles.ALL,
suppress_callback_exceptions=True,
use_pages=True,
title="app_dmc",
update_title="loading...",
pages_folder="",
)
dash.register_page("page1", layout=page1.layout, path="/", order=0)
dash.register_page("page2", layout=page2.layout, order=1)
def serve_layout():
return html.Div(
[
dcc.Location(id="url"),
html.Div(id="page-content"),
# html.Div(
# id="notifications-container",
# ), # To fix on DMC 1.0+, uncomment this Div and comment out the one on page1
]
)
def app_layout():
app_header = dmc.AppShellHeader(dmc.Title("My DMC App"))
app_navbar = dmc.AppShellNavbar(
id="app-navbar",
children=[
html.Div(
[
dmc.NavLink(
label=page["name"].title(),
href=page["relative_path"],
id={"type": "navlink", "index": page["relative_path"]},
noWrap=True,
)
for page in dash.page_registry.values()
],
),
],
)
return dmc.MantineProvider(
children=[
dmc.NotificationProvider(position="bottom-right"),
dmc.AppShell(
id="app-shell",
children=[
app_header,
app_navbar,
html.Div(id="app-content", children=[dash.page_container]),
],
header={
"height": 50,
"zIndex": 1400,
},
navbar={
"width": 200,
"zIndex": 1300,
"breakpoint": 500,
},
aside={
"width": 0,
"zIndex": 1300,
"breakpoint": 500,
},
),
],
id="mantine-provider",
)
app.layout = serve_layout
@callback(
Output("page-content", "children"),
Input("url", "pathname"),
prevent_initial_call=True,
)
def display_page(_):
return app_layout()
@callback(
Output({"type": "navlink", "index": dash.ALL}, "active"),
Input("_pages_location", "pathname"),
)
def update_navlinks(pathname):
return [
control["id"]["index"] == pathname
for control in dash.callback_context.outputs_list
]
if __name__ == "__main__":
app.run(debug=True)