How to create a button that open and closed side bar?

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 62.5,
    "right": 0,
    "bottom": 0,
    "width": "16rem",
    "height": "100%",
    "z-index": 1,
    "overflow-x": "hidden",
    "transition": "all 0.5s",
    "padding": "0.5rem 1rem",
    "background-color": "#f8f9fa",
}

SIDEBAR_HIDEN = {
    "position": "fixed",
    "top": 62.5,
    "right": "-16rem",
    "bottom": 0,
    "width": "16rem",
    "height": "100%",
    "z-index": 1,
    "overflow-x": "hidden",
    "transition": "all 0.5s",
    "padding": "0rem 0rem",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "transition": "margin-right .5s",
    "margin-right": "18rem",
    "margin-left": "2rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

CONTENT_STYLE1 = {
    "transition": "margin-right .5s",
    "margin-left": "2rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar layout with navigation links"
        )
    ],
    id="sidebar",
    style=SIDEBAR_STYLE,
)

content_layout = html.Div(
    dbc.Container(
        fluid=True,
        children=[
            html.Link(
                rel='icon',
                href='/home/lpt-206/Downloads/propflologo.png',  # Replace with the actual path to your custom logo file
                type='image/x-icon'
            ),
            dcc.Location(id='url', refresh=False),
            dbc.Row(

                [
                    dbc.Col(
                        [
                            html.Div(
                                className='left-pane',
                                children=[
                                    html.Button(
                                        children=[html.I(className='fas fa-plus'), ' Add Board'],
                                        id='add-button',
                                        n_clicks=0,
                                        className='btn btn-primary btn-sm mb-2'
                                    ),
                                    html.H6('Pinned', className='mt-3 mb-2'),
                                    dcc.Dropdown(
                                        id='pinned-dropdown',
                                        options=[],
                                        value=None,  # No pre-selected value
                                        className='mb-3'
                                    ),
                                    html.Button(
                                        children=[html.I(className='fas fa-plus'), ' Get Board'],
                                        id='get-button',
                                        n_clicks=0,
                                        className='btn btn-primary btn-sm mb-2'
                                    )
                                ],
                                style={'padding': '10px', 'border-radius': '5px', 'height': '100vh'}
                            ),
                        ],
                        md={'size': 2, 'order': 1},  # Set the size and order of the left pane
                        className='resizable-pane',
                        style={"height": "100vh"}
                    ),
                    dbc.Col(
                        [
                            html.H1('Custom Dashboard', className='display-4 mt-4'),
                            html.P('Create and visualize graphs', className='lead'),
                            html.Hr(className='my-2'),
                            html.P('Select the columns for the x-axis and y-axis, and choose the graph type.'),
                            html.P('Click the "Add Graph" button to create a new graph.'),
                            dbc.Button(
                                'Add Graph',
                                id='add-graph-button',
                                color='success',
                                className='btn btn-primary mt-3'
                            ),
                            dbc.Button("Sidebar", outline=True, color="secondary", className="mr-1", id="btn_sidebar"),
                            dbc.Row(
                                [
                                    dbc.Col(
                                        [
                                            html.Label('Start Date:', className='mt-3'),
                                            dcc.DatePickerSingle(
                                                id='start-date-picker',
                                                initial_visible_month=None,
                                                className='mb-3'
                                            ),
                                        ],
                                        md=6
                                    ),
                                    dbc.Col(
                                        [
                                            html.Label('End Date:', className='mt-3'),
                                            dcc.DatePickerSingle(
                                                id='end-date-picker',
                                                initial_visible_month=None,
                                                className='mb-3'
                                            ),
                                        ],
                                        md=6
                                    ),
                                ],
                                justify='end',
                                align='center',
                                className='mt-3'
                            ),
                            dbc.Row(
                                [
                                    dbc.Col(
                                        [
                                            dbc.Button(
                                                'Filter Graphs',
                                                id='filter-button',
                                                color='primary',
                                                className='btn btn-primary'
                                            ),
                                        ],
                                        md=6
                                    ),
                                ],
                                justify='end',
                                align='center',
                                className='mt-3'
                            ),
                            html.Label('Filter by Column:', className='mb-1.5'),
                            dcc.Dropdown(
                                id='column-filter-dropdown',
                                options=dropdown_options,
                                value=None,  # No pre-selected value
                                className='mb-1.5'
                            ),
                            html.Label('Filter by Value:', className='mt-3'),
                            dcc.Dropdown(
                                id='unique-value-dropdown',
                                options=[],
                                value=None,  # No pre-selected value
                                multi=True,
                                className='mb-1.5'
                            ),
                            dbc.Container(
                                [
                                    dbc.Row(
                                        [
                                            html.Div(
                                                id='graph-container',
                                                className='row',
                                                style={'margin-top': '20px'}
                                            )
                                        ]
                                    )
                                ],
                                fluid=True,
                                style={'padding': '20px', 'border-radius': '5px', 'box-shadow': '0px 0px 10px rgba(0, 0, 0, 0.1)'}
                            ),
                            html.Label('Board Name:', className='mt-3'),
                            dcc.Input(
                                id='board-name-input',
                                type='text',
                                placeholder='Enter the board name...',
                                className='mb-3'
                            ),
                            dbc.Button(
                                'Save Board',
                                id='save-button',
                                color='info',
                                className='btn btn-primary mt-3'
                            ),
                        ],
                        md={'size': 10, 'order': 2},
                        style={'box-shadow': '0px 0px 10px rgba(0, 0, 0, 0.1)', 'background-color': '#f9f6f3'}  # Set the size and order of the right pane
                    ),

                ],
                className='split-pane', style=CONTENT_STYLE
            ),
        ],
    className='main-container',
        style={"height": "100vh"}
    ),
    style=CONTENT_STYLE
)

app.title = "Custom Dashboard"
app.layout = html.Div(
    [
        dcc.Store(id='side_click'),
        dcc.Location(id="url"),
        sidebar,
        content_layout,
    ],
) 

This is my app layout and 
@app.callback(
    [
        Output("sidebar", "style"),
        Output("page-content", "style"),
    ],
    [Input("btn_sidebar", "n_clicks")],
    [
        State("sidebar", "style"),
        State("page-content", "style"),
    ]
)
def toggle_sidebar(n_clicks, sidebar_style, content_style):
    if n_clicks % 2 == 1:
        sidebar_style["right"] = "0"
        content_style["margin-right"] = "18rem"
    else:
        sidebar_style["right"] = "-16rem"
        content_style["margin-right"] = "2rem"

    return sidebar_style, content_style 

this is the function for toggling

HI @krishnateja welcome to the forums.

I’m not sure, if altering the styles of your divs is the way to go for a sidebar. While we wait for other answers, maybe you could take a look on this example (since you are using dbc anyways):
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/offcanvas/

Maybe you can also find something here:
https://community.plotly.com/search?q=sidebar

Thanks @AIMPED I’ll look into this

I did something as below:

import pandas as pd
import numpy as np
from datetime import datetime as dt
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash_table
import dash_bootstrap_components as dbc
import glob
import os
from pandas.tseries.offsets import BDay
import plotly.graph_objects as go
from dash.exceptions import PreventUpdate

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

PLOTLY_LOGO = "/assets/PikPng.com_static-png_456763.png"

clipboard = "/assets/grid.svg"
table = "/assets/pie-chart.svg"
cart = "/assets/cart.svg"
sidebar = '/assets/swipe_black_48dp.svg'
face = '/assets/eye (1).svg'
users = '/assets/users.svg'
product='/assets/package.svg'
sell = '/assets/shopping-cart.svg'

search_bar = dbc.Row([
    dbc.Col(
        dbc.Button(
            html.Img(src=sidebar, height="20px"), 
            color="white", 
            className="ms-2", 
            n_clicks=0,
            id="btn_sidebar",
            size="sm"),
        width="auto",
    ),
],
    className="g-0 ms-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

navbar = dbc.Navbar(
    dbc.Container(
        [html.A(
            dbc.Row([
                dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px"))
            ],
                align="left"),
                href="https://plotly.com",
                style={"textDecoration": "none"},
            ),
            dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
            dbc.Collapse(
                search_bar,
                id="navbar-collapse",
                is_open=False,
                navbar=True,
            ),
        ]
    ),
    color="white", #dark, light
    dark=True,
)


# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 62.5,
    "right": 0,
    "bottom": 0,
    "width": "6rem",
    "height": "100%",
    "z-index": 1,
    "overflow-x": "hidden",
    "transition": "all 0.5s",
    "padding": "0.5rem 1rem",
    "background-color": "white", #"#f8f9fa"
}

SIDEBAR_HIDEN = {
    "position": "fixed",
    "top": 62.5,
    "right": "-6rem",
    "bottom": 0,
    "width": "6rem",
    "height": "100%",
    "z-index": 1,
    "overflow-x": "hidden",
    "transition": "all 0.5s",
    "padding": "1rem 1rem",
    "background-color": "white",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "transition": "margin-left .5s",
    "margin-right": "6rem",
    "margin-left": "0rem",
    "padding": "1rem 1rem",
    "background-color": "#f8f9fa",
}

CONTENT_STYLE1 = {
    "transition": "margin-left .5s",
    "margin-left": "0rem",
    "margin-right": "0rem",
    "padding": "1rem 1rem",
    "background-color": "#f8f9fa",
}

sidebar = html.Div([
        dbc.Nav(
            [dbc.NavLink(html.Img(src=clipboard, height="20px"), 
                            href="/page-1", 
                            id="page-1-link",
                            className="text-center",
                            style={'padding-top' : 30,'padding-bottom' : 30}),
             dbc.NavLink(html.Img(src=table, height="20px"), 
                            href="/page-2", 
                            id="page-2-link",
                            className="text-center",
                            style={'padding-top' : 30,'padding-bottom' : 30}),
             dbc.NavLink(html.Img(src=cart,height="20px"),
                            href="/page-3", 
                            id="page-3-link",
                            className="text-center",
                            style={'padding-top' : 30,'padding-bottom' : 30}),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    id="sidebar",
    style=SIDEBAR_STYLE,
)

content = html.Div(

    id="page-content",
    style=CONTENT_STYLE)

app.layout = html.Div(
    [dcc.Store(id='side_click'),
     dcc.Location(id="url"),
     navbar,
     sidebar,
     content])

@app.callback(
    [Output("sidebar", "style"),
     Output("page-content", "style"),
     Output("side_click", "data")],
    [Input("btn_sidebar", "n_clicks")],
    [State("side_click", "data")])

def toggle_sidebar(n, nclick):
    if n:
        if nclick == "SHOW":
            sidebar_style = SIDEBAR_HIDEN
            content_style = CONTENT_STYLE1
            cur_nclick = "HIDDEN"
        else:
            sidebar_style = SIDEBAR_STYLE
            content_style = CONTENT_STYLE
            cur_nclick = "SHOW"
    else:
        sidebar_style = SIDEBAR_STYLE
        content_style = CONTENT_STYLE
        cur_nclick = 'SHOW'

    return sidebar_style, content_style, cur_nclick

if __name__ == "__main__":
    app.run_server(debug=False, port=8087)

So when you click the button, it will show or hide your Nav Bar. Hope this help.

2 Likes

I have developed a similar solution few time ago

You can check it here: