Hi @tphil10,
Thanks for sharing the Mantine example. I do use Mantine components a lot. However, I copied the code you shared and ran the script, it didn’t work like the GIP picture you showed🥲
Do I miss something or anything I should do?
Hi @tphil10 ,
Thanks for reply. The code worked fine and it didn’t show any error. However, the layout was so different from yours.
It looks like this:
Oh! Haha you are right, my apologies. I updated the css file to include the background color and such for those components. See if that works better.
2 Likes
Hello~
It looks better! Many thanks! Well… My sidebar doesn’t expand on hover. Do I miss something?
By the way, if I want to add graphs or cards on the right side of the page. Will you suggest create another Div element inside the app layout or shall I use like Container or Grid? Or is there any better way?
Thank you!
@IvanLiu Ah, my bad, realizing the topic header says “expands on hover” lol. My solution expands on window resize, not hover.
As for the container, I created a container that had a margin-left equal to the width of the sidebar.
app.layout = dmc.MantineProvider(
theme={
'fontFamily': '"Inter", sans-serif'
},
withGlobalStyles=True,
withNormalizeCSS=True,
children=[
dcc.Location(id='url', refresh=False),
dmc.NotificationsProvider([
head,
dmc.MediaQuery([navbar], smallerThan="md", styles={'display': 'none'}),
dmc.MediaQuery([smaller_navbar], largerThan="md", styles={'display': 'none'}),
dmc.Container(
[dash.page_container],
id="page-container",
ml="250px",
p="1rem",
fluid=True
)
], position="top-center")
],
)
This is what my full app layout looks like, the dash.page_container is the convention from dash new multipage solution. The margin-left is probably a bit noobish but it works for me. If anyone else has another way of doing it i’d love to know.
2 Likes
Hi @tphil10
Ha, no worries, it’s ok.
Thanks for the snippet of code you provided. Now, I have a better understanding how to arrange my app layout.
Would you please share your web app link or a screenshot? It would be so great to see what it looks like.
Many thanks!
I updated the topic head to include “and other cool sidebars”. Thanks for sharing your responsive sidebar @tphil10
If anyone else has nice sidebar examples, please feel free to post it here!
Hi @AnnMarieW, ok, thank you!
@tphil10 Thanks for sharing. 
, it’s a great app! I also used my smartphone to open the app, and the layout was still clear, not messy. Awesome!
Is having RWD effect the reason why you used window resized? I also noticed that the sidebar wouldn’t expand if I opened the app via smartphone.
I think this is really cool!!! Is it a card component? Could you please show me how to create one? 
Thank you!
1 Like
Oh, that is cool - Now I think we need to start a Cool Card components topic 
1 Like
Sorry i’m not familiar with the acronym ‘RWD’, what’s that mean? Yea most smartphones have a small viewport so the menu would remain collapsed. You could add more rules into the mediaquery to have it do a variety of things on dozens of different screen sizes.
Hi @tphil10
Ok, I see. I will try and see how it goes. Thank you.
By the way, RWD stands for Responsive Web Design~~
Hi,
First of all, I’d like to thank this amazing community for such great content.
I’m not a coding expert, but I’m trying to replicate the code for the Hover Sidebar and I’m getting a small difference from the original.
After playing around with several things, I discovered that when the MATERIA dbc.themes is applied, everything works fine (Picture 1), but suddenly, when I apply the DARKLY theme, something happens on the icon placement (Picture 2).
My best guess is something with the padding when the Sidebar is collapsed?
It only happens with the DARKLY theme, all the others are ok! 
Something I’m missing?
Thanks!
Hi @DenysC and welcome to the Dash community 
I just wanted you to know that I tried this example with DARKLY and could duplicate the issue. It’s the only theme so far that I can find with the same problem.
There is something in the Darkly that’s interfering with the css for the sidebar. I just haven’t figured out what it is (yet?). Sorry I can’t be more helpful right now.
Here @DenysC , it seems to be something with the padding, adjust this:
/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
width: 100%;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
display: flex;
padding-right:1rem;
padding-left:1rem;
padding-top:1rem;
}
1 Like
Hi @AnnMarieW and @jinnyzor,
Jinnyzor solution worked perfectly with the DARKLY theme. I also applied with other themes and all is good now!
Thank you both for the attention and the support.
Denys!
1 Like
This doesnt work for me.
Best regards, Clemens
Hi everyone,
I just wanted to add my approach to this navbar. It uses mainly Mantine and a little bit of CSS. You can find a working example here. (Will take some time to spin up). Can find the code here. And for a brief step-by-step explanation find here
The approach is simple, added two buttons, one for the Navbar other for the Drawer. Both are components in Mantine. And using Media queries to adjust both buttons’ views. As far as CSS is concerned only to provide a hover effect to the navbar.
3 Likes