# 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