Question about the 'Side Navigation Bar'

[q1121599315]

Hey Adam!
I looked at the video of "Side Navigation Bar" on your youtube channel，and I got a question, I want to design a complicated app by just using side bar. In order to do this , I have to create another app, but I don't known how to deal with these two callbacks.
the code as following:

import dash
import dash_bootstrap_components as dbc
from dash import html,dcc
import plotly.express as px
from dash.dependencies import Input,Output
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Bootstrap/Side-Bar/iranian_students.csv')

app2=dash.Dash(name,external_stylesheets=[dbc.themes.BOOTSTRAP],suppress_callback_exceptions=True)
server = app2.server
df2 = px.data.tips()
days = df2.day.unique()
app2.layout = html.Div([
dcc.Dropdown(
id="dropdown",
options=[{"label": x, "value": x} for x in days],
value=days[0],
clearable=False,
),
dcc.Graph(id="bar-chart"),
])

@app2.callback(
Output("bar-chart", "figure"),
[Input("dropdown", "value")])
def update_bar_chart(day):
mask = df2["day"] == day
fig = px.bar(df2[mask], x="sex", y="total_bill",
color="smoker", barmode="group")
return fig

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

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

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

sidebar=html.Div(
[
html.H2('Sidebar',className='display-4'),
html.Hr(),
html.P(
'Number of students per education level',className='lead'
),
dbc.Nav(
[
dbc.NavLink('Home',href='/',active='exact'),
dbc.NavLink('Page 1',href='/page-1',active='exact'),
dbc.NavLink('Page 2',href='/page-2',active='exact'),
],
vertical=True,
pills=True,#
),
],
style=SIDEBAR_STYLE,
)

content=html.Div(id='page-content',children=[],style=CONTENT_STYLE)

app.layout=html.Div([
dcc.Location(id='url'),
sidebar,
content
])
@app.callback(
Output('page-content','children'),
[Input('url','pathname')]
)
def render_page_content(pathname):
if pathname=='/':
return [app2.layout]
elif pathname =='/page-1':
return [
html.H1('Grad School in Iran',
style={'textAlign':'center'}),
dcc.Graph(id='bargraph',
figure=px.bar(df,barmode='group',x='Years',
y=['Girls Grade School','Boys Grade School']))
]
elif pathname =='/page-2':
return [
html.H1('High School in Iran',
style={'textAlign':'center'}),
dcc.Graph(id='bargraph',
figure=px.bar(df,barmode='group',x='Years',
y=['Girls High School','Boys High School']))
]
return dbc.Jumbotron(
[
html.H1('404 : Not found' ,className='text-danger'),
html.Hr(),
html.P(f'The pathname {pathname} was not recognised...')
]
)
if name=='main':
app.run_server(debug=True,port=3001)

I have also looked at the video of Deploy_App_to_Web\Multipage_App on your channel , but i think that using side bar is much more easier than building a multipage app. Looking for you support.

[Coding-with-Adam]

Hi There,Are you on my Patreon by any chance?https://www.patreon.com/charmingdataI just released a video there on how to use the Burger with a side bar. It's a very basic initial example but next week, I'd like to create a video showing how to build an app with that side bar. I'm not sure what error message you are getting wtih the current code you have..Adam SchroederOwnerCharming Data LLC 118 E 124th ST #1808, New York, New York 10035   My Pronouns: He, him, his ¡Hablo español!  On Oct 19 2021, at 4:12 am, q1121599315 ***@***.***> wrote: Hey Adam! I looked at the video of "Side Navigation Bar" on your youtube channel，and I got a question, I want to design a complicated app by just using side bar. In order to do this , I have to create another app, but I don't known how to deal with these two callbacks. the code as following: import dash import dash_bootstrap_components as dbc from dash import html,dcc import plotly.express as px from dash.dependencies import Input,Output import pandas as pd df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Bootstrap/Side-Bar/iranian_students.csv') app2=dash.Dash(name,external_stylesheets=[dbc.themes.BOOTSTRAP],suppress_callback_exceptions=True) server = app2.server df2 = px.data.tips() days = df2.day.unique() app2.layout = html.Div([ dcc.Dropdown( id="dropdown", options=[{"label": x, "value": x} for x in days], value=days[0], clearable=False, ), dcc.Graph(id="bar-chart"), ]) @app2.callback( Output("bar-chart", "figure"), [Input("dropdown", "value")]) def update_bar_chart(day): mask = df2["day"] == day fig = px.bar(df2[mask], x="sex", y="total_bill", color="smoker", barmode="group") return fig app=dash.Dash(name,external_stylesheets=[dbc.themes.BOOTSTRAP]) SIDEBAR_STYLE={ 'position':'fixed', 'top':0, 'left':0, 'bottom':0, 'width':'16rem', 'padding':'2rem 1rem', 'background-color':'#f8f9fa', } CONTENT_STYLE={ 'margin-left':'18rem', 'margin-right':'2rem', 'padding':'2rem 1rem', } sidebar=html.Div( [ html.H2('Sidebar',className='display-4'), html.Hr(), html.P( 'Number of students per education level',className='lead' ), dbc.Nav( [ dbc.NavLink('Home',href='/',active='exact'), dbc.NavLink('Page 1',href='/page-1',active='exact'), dbc.NavLink('Page 2',href='/page-2',active='exact'), ], vertical=True, pills=True,# ), ], style=SIDEBAR_STYLE, ) content=html.Div(id='page-content',children=[],style=CONTENT_STYLE) app.layout=html.Div([ dcc.Location(id='url'), sidebar, content ]) @app.callback( Output('page-content','children'), [Input('url','pathname')] ) def render_page_content(pathname): if pathname=='/': return [app2.layout] elif pathname =='/page-1': return [ html.H1('Grad School in Iran', style={'textAlign':'center'}), dcc.Graph(id='bargraph', figure=px.bar(df,barmode='group',x='Years', y=['Girls Grade School','Boys Grade School'])) ] elif pathname =='/page-2': return [ html.H1('High School in Iran', style={'textAlign':'center'}), dcc.Graph(id='bargraph', figure=px.bar(df,barmode='group',x='Years', y=['Girls High School','Boys High School'])) ] return dbc.Jumbotron( [ html.H1('404 : Not found' ,className='text-danger'), html.Hr(), html.P(f'The pathname {pathname} was not recognised...') ] ) if name=='main': app.run_server(debug=True,port=3001) I have also looked at the video of Deploy_App_to_Web\Multipage_App on your channel , but i think that using side bar is much more easier than building a multipage app. Looking for you support. —You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe.Triage notifications on the go with GitHub Mobile for iOS or Android.