Adding navbar to dash with side bar

Dash Python
1

Hello ! i want to add a nav bar with a button that reduce sidebar element to my dash (it contains a side bar )
Like this :

image
image878×342 31 KB

i used this code to create my dash side bar :

SIDEBAR_STYLE = {
“position”: “fixed”,
“top”: 0,
“left”: 0,
“bottom”: 0,
“width”: “16rem”,
“padding”: “2rem 1rem”,
“background-color”: “#f8f9fa”,
}

the styles for the main content position it to the right of the sidebar and

add some padding.

CONTENT_STYLE = {
“margin-left”: “18rem”,
“margin-right”: “2rem”,
“padding”: “2rem 1rem”,
}

sidebar = html.Div(
[ #html.Img(src=app.get_asset_url(“logo.jpg”)),
html.Img(src=app.get_asset_url(‘logo.jpg’),style={“width”:‘90%’}),
#html.H2(“Sidebar”, className=“display-4”),
html.Hr(),
#html.P(“A simple sidebar layout with navigation links”, className=“lead”),

    dbc.Nav(
        [
            dbc.NavLink([html.I(className="fa fa-home"), html.Span("  Home")], href="/", active="exact"),
            
            html.Hr(),
2

please help my friends

3

Put your Sidebar in a dbc.Offcanvas or dmc.drawer

http://dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/

Use a dmc.ActionIcon, populate it with a Iconify Hamburger

https://icon-sets.iconify.design/?query=hamburger

Now create callback that will open and close the offcanvas / drawer when you press the action icon

6 Likes
4

Thank You @matt1 ! You are the best

1 Like