That is a simple styling issue, you can try specifying a higher z-index to the overlay

I will try it but i don't think it's about z index

Because I can't click on the sidebar. Clicking the sidebar closes the modal

also if you're using position: fixed, it should be at the center of the viewport. You're using position: absolute right now?

I don't recommend using absolute for dialogs as you may want a relative container.

I am using headless ui. And yea for the backdrop i am using fixed

Right now on phone but wait lemme share the code

Okay, if you can't get it work on your project, try copying the [official example](https://headlessui.com/react/dialog) and figure out what's wrong in your code

Here. The highlighted part is the backdrop

Yep I did copy the code from headless ui

does it work for you?

Nope. I'm using the official code but the backdrop doesn't appear on sidebar

The sidebar is in layout.tsx btw

hold up, what is your code in sidebar?

Ahh wait lemme get a screenshot of that. It's a huge component tho

Oh i think i understand now

Both have fixed

The backdrop and the sidebar

Yea... you shouldn't have both fixed, they're overlapping

Making one of these absolute will fix the issue?

Let's see. Not very good at positioning haha

Sure I'll keep that in mind.
Thanks!

@fuma Solved it just with z-index
So bad of me I didn't see the code after I copied and pasted it.

The sidebar was z-40 and dialog was z-10 lol

Nice! Mark my answer as the solution if your problem has been solved

Thanks a lot!