84 lines
2.1 KiB
Python
84 lines
2.1 KiB
Python
"""
|
|
Collapsible navbar on both desktop and mobile
|
|
"""
|
|
|
|
|
|
import dash_mantine_components as dmc
|
|
from dash import Dash, Input, Output, State, callback
|
|
from dash_iconify import DashIconify
|
|
|
|
app = Dash(external_stylesheets=dmc.styles.ALL)
|
|
|
|
logo = "https://github.com/user-attachments/assets/c1ff143b-4365-4fd1-880f-3e97aab5c302"
|
|
|
|
def get_icon(icon):
|
|
return DashIconify(icon=icon, height=16)
|
|
|
|
layout = dmc.AppShell(
|
|
[
|
|
dmc.AppShellHeader(
|
|
dmc.Group(
|
|
[
|
|
dmc.Burger(
|
|
id="mobile-burger",
|
|
size="sm",
|
|
hiddenFrom="sm",
|
|
opened=False,
|
|
),
|
|
dmc.Burger(
|
|
id="desktop-burger",
|
|
size="sm",
|
|
visibleFrom="sm",
|
|
opened=True,
|
|
),
|
|
dmc.Image(src=logo, h=40),
|
|
dmc.Title("Demo App", c="blue"),
|
|
],
|
|
h="100%",
|
|
px="md",
|
|
)
|
|
),
|
|
dmc.AppShellNavbar(
|
|
id="navbar",
|
|
children=[
|
|
"Navbar",
|
|
dmc.NavLink(
|
|
label="With icon",
|
|
leftSection=get_icon(icon="bi:house-door-fill"),
|
|
),
|
|
],
|
|
p="md",
|
|
),
|
|
dmc.AppShellMain("Main"),
|
|
],
|
|
header={"height": 60},
|
|
navbar={
|
|
"width": 300,
|
|
"breakpoint": "sm",
|
|
"collapsed": {"mobile": True, "desktop": False},
|
|
},
|
|
padding="md",
|
|
id="appshell",
|
|
)
|
|
|
|
app.layout = dmc.MantineProvider(layout)
|
|
|
|
|
|
@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
|
|
|
|
|
|
|
|
if __name__ == "__main__":
|
|
app.run(host='0.0.0.0', debug=True, port=8050)
|