Building Dashboard using Dash — Responsive Navbar Part — 2
Recap
In our previous post, we demonstrated how to create a responsive navbar for larger screens. We added a responsive button to adjust the width of the navbar and also included a hover effect on the navbar.
Creating a responsive navbar involves designing a navbar that can adapt to different screen sizes, ensuring that the navbar remains functional and visually appealing across a wide range of devices. One way to do this is to add a responsive button that toggles the width of the navbar. This allows the user to switch between a compact navbar that takes up less space on the screen and a full-width navbar that provides more room for content.
Part 2 will cover creating a mobile-friendly version of the navbar and connecting it to the larger screen version. We will use media queries to ensure a smooth transition between the two screens.
Let’s Build
Step 1 — One of Mantine components is the “drawer”, which is designed to display an overlay area at any side of the screen. The “drawer” component has a number of useful properties, including the “opened” property, which can be used to integrate it with a callback function triggered by a button. By manipulating the value of the “opened” property, we can control when the drawer is displayed on the screen.
Drawer = dmc.Drawer(
title="Company Name",
id="drawer-simple",
padding="md",
zIndex=10000,
size=300,
overlayOpacity=0.1,
children=[
html.Div([
dmc.NavLink(
label="With icon",
icon=DashIconify(icon="bi:house-door-fill", height=16, color="#c2c7d0")
),
dmc.NavLink(
opened=False,
label="With right section",
icon=DashIconify(icon="tabler:gauge", height=16, color="#c2c7d0")
rightSection=DashIconify(icon="tabler-chevron-right", height=16, color="#c2c7d0")
),
dmc.NavLink(
label="Disabled",
icon=DashIconify(icon="tabler:circle-off", height=16, color="#c2c7d0")
disabled=True,
),
dmc.NavLink(
label="With description",
description="Additional information",
icon=dmc.Badge(
"3", size="xs", variant="filled", color="red", w=16, h=16, p=0
),
),
dmc.NavLink(
label="Active subtle",
icon=DashIconify(icon="tabler:activity", height=16, color="#c2c7d0")
rightSection=DashIconify(icon="tabler-chevron-right", height=16, color="#c2c7d0")
variant="subtle",
active=True,
),
], style={'white-space': 'nowrap'},
)
]
)
Btn2 = dmc.Button(
DashIconify(icon="ci:hamburger-lg", width=24, height=24,color="#c2c7d0"),
variant="subtle",
p=1,
id='drawer-demo-button'
)
@dash.callback(
Output("drawer-simple", "opened"),
Input("drawer-demo-button", "n_clicks"),
prevent_initial_call=True,
)
def drawer_dem(n_clicks):
return True
Step 2 —Currently, we have implemented two buttons to handle different navigation requirements — a handle navbar for larger screens and another handle overlay area for smaller screens. However, having two buttons is not feasible. To resolve this, we have implemented a media query solution. Specifically, if the screen size is smaller than the hiddenBreakpoint value of the navbar, the button controls the drawer. Conversely, if the screen size is larger than the hiddenBreakpoint value, the button controls the navbar.
dmc.Group([
dmc.MediaQuery([
dmc.Button(
DashIconify(icon="ci:hamburger-lg", width=24, height=24,color="#c2c7d0"),
variant="subtle",
p=1,
id='sidebar-button'
),
], smallerThan="md", styles={'display': 'none'}), #if size smaller than md then display is none
dmc.MediaQuery([
dmc.Button(
DashIconify(icon="ci:hamburger-lg", width=24, height=24,color="#c2c7d0"),
variant="subtle",
p=1,
id='drawer-demo-button'
),
], largerThan="md", styles={'display': 'none'}), #if size greater than md then display is none
dmc.Text("Company Name")
])Well, that’s the key concept of the whole responsive navbar.
Step 3 — Now comes the styling part, if you want to make your drawer component colourful then use styles property instead of style.
styles={'drawer':{'background-color':'#343a40'}}App Layout
Upon completion of the responsive navbar, the focus now shifts to devising a layout that facilitates the ease of building a dashboard with future growth in mind.
We will start with the MantimeProvider component which serves as a wrapper around your application to provide the Mantine theme and styling to all Mantine components used within it. We will style the Navlink label in it.
Under this, we will create a container that occupies the entire space with zero padding and margin. The container’s display property should be set to flex.
Under this put Navbar, Drawer and again new container that will have a header, different pages and a footer.
Under the header section, we put our button media query.
app.layout =dmc.MantineProvider(
theme={
'fontFamily': '"Inter", sans-serif',
"components": {
"NavLink":{'styles':{'label':{'color':'#c2c7d0'}}}
},
},
children=[
dmc.Container([
Navbar,
Drawer,
dmc.Container([
dmc.Header(
height=60,
children=[
dmc.Group([
dmc.MediaQuery([
Btn1
], smallerThan="md", styles={'display': 'none'}),
dmc.MediaQuery([
Btn2
], largerThan="md", styles={'display': 'none'}),
dmc.Text("Company Name")
])
],p='10px', style={"backgroundColor": "#fff"}),
dash.page_container],
id="page-container",
p=0,
fluid=True,
style={'background-color':'#f4f6f9', 'width':'100%', 'margin':'0'}
)
], size='100%', p=0,m=0, style={'display':'flex'})
])dash.page_container — This is where the page content is displayed when a user navigates to that page’s path using Navlink.
Conclusion
In conclusion, creating a responsive navbar using Dash can greatly enhance the user experience and accessibility of web applications. By utilizing various techniques such as media queries and the Dash component, a responsive navbar can be created that adapts to different screen sizes and devices.
A well-designed navbar not only improves the overall aesthetics of a web application but also makes it more user-friendly and easier to navigate. It is important to consider the scalability of the navbar design when building a dashboard, and using a modular and consistent approach can make it easier to add new elements in the future without disrupting the existing design.
Overall, implementing a responsive navbar using Dash can greatly improve the usability and accessibility of a web application, making it a valuable addition to any dashboard project.
One can view the above final visualization by visiting the following link and the GitHub link. I hope you’ve found this guide informative and helpful in creating a visually appealing dashboard with Dash. In the next part, we will handle the response time of the navbar.
Please feel free to leave a comment below. Any suggestions or questions will help us improve future content and better serve your needs. Thank you for reading and a clap will not hurt, isn’t it?
