How to Add Drawer with Navigation bar without bottom extra space

[vishal-ainow]

As you've seen in the below URL, I'm trying to disable scrolling. When I add a drawer, the entire page scrolls because I've included a navbar (header). However, I want only the content to scroll, not the entire screen. What am I missing here?

https://play.tailwindcss.com/3aJfqd22IY?size=1048x529

[saadeghi]

Pur the navbar inside drawer-content

https://daisyui.com/components/drawer/#drawer-tags-structure

[vishal-ainow]

Hey @saadeghi, When I followed your approach and placed the Navbar inside drawer-content, it moved to the right side like this. However, I need it to be displayed only at the top.

[saadeghi]

Remove flex class from drawer-content.
When you add flex class, it puts items horizontally.

[vishal-ainow]

Hey @saadeghi, As you can see in the screenshot, when I remove the flex class from drawer-content, the navbar still aligns to the right side of the page. However, as indicated in the screenshot with the orange highlight, I need the navbar to fit snugly at the top. Immediately following that, the drawer should be displayed.

When I add a top bar above the drawer, I notice there's extra space at the bottom equivalent to the menu height.

How to remove this extra space?

[saadeghi]

In that case, if you want the navbar on top of the sidebar as well here are the changes you need to make:

1. remove <main class="min-h-screen">
2. Put back navbar out of drawer. I initially told you to put it inside, because I didn't know you want the navbar on top of the sidebar as well (thanks for the screenshot)
3. Add h-[calc(100vh-4rem)] top-16 to drawer-side because your navbar is sticky and you won't want the sidebar to go under the navbar.
4. Additionally there's an issue with your menu. Remove flex h-full flex-col overflow-auto. You don't need any of them. Add min-h-full so your menu covers the height.

Here's the fixed version:

https://play.tailwindcss.com/hzj8ex41Uf?size=1088x699