I’m working on an admin panel in Next.js and I’m trying to achieve the following layout:

A fixed sidebar on the left side that remains visible as the user scrolls through the content.
A fixed header at the top that also stays visible during scrolling.
The sidebar should be conditionally renderable based on certain criteria (e.g., different pages may or may not have the sidebar).
I’m having trouble with the following issues:

Fixed Positioning: I’m not sure how to correctly set the sidebar and header to be fixed without affecting the layout of the main content area. When I try to make the sidebar fixed, it overlaps with the header or causes layout issues with the children components.

Conditional Rendering: I want to render the sidebar only on specific pages (for example, on dashboard pages but not on login or other pages). What’s the best way to handle this in Next.js?

I’m using Tailwind CSS for styling, but I’m open to suggestions for how to structure and style this in any way that works best.

My Current Issues:

How can I make sure that both the sidebar and header are fixed, but the main content scrolls independently without causing layout issues?
What is the recommended approach for conditionally rendering the sidebar in a Next.js app?
Any help or guidance would be greatly appreciated!

enter image description here

This is what I have done and

enter image description here

This is what I’m expecting where sidebar is scrollable and fixed and header is also fixed