Hi,
How to create something like this in the offcanvas? How to add-in the html.Ul
to work together with the dash.register_page
?
Sample:
Code:
app.py
sidebar = dbc.Nav(
[
dbc.NavLink(
[
html.Div([
html.I(className=page["icon"]),
page["name"]
], className="ms-2"),
],
href=page["path"],
active="exact",
)
for page in dash.page_registry.values()
],
vertical=True,
pills=True,
className="bg-light",
)
app.layout = dbc.Container([
html.Div([
dbc.Button(html.I(className ="bi bi-list"), #"Menu",
id="open-offcanvas", n_clicks=0),
dbc.Offcanvas([
dcc.Location(id="url"),
sidebar,
content
],
id="offcanvas",
title="Welcome to .../",
is_open=False,
),
]),
dbc.Row([
dbc.Col(html.Div("Tes",
style={'fontSize':50, 'textAlign':'center'}))
]),
html.Hr(),
dbc.Row([
dbc.Col([
dash.page_container
], xs=8, sm=8, md=10, lg=10, xl=10, xxl=10)
]
)
], fluid=True)
page1.py
dash.register_page(__name__,
path='/', # '/' is home page and it represents the url
name='Home', # name of page, commonly used as name of link
title='Main', # title that appears on browser's tab
icon="bi bi-house",
)
# page 1 data
layout = dbc.Container([
dbc.Row([
dbc.Col([
html.H1('Welcome to ...', className = 'text-center text-primary, mb-4 '
,style={'font-weight': 'bold'}),
]),
]),