Showing a Fixed Overlay from the Header

[yhranik-vp]

After performing a certain action in the header component, I want to display a global fixed overlay that covers the entire app.

If I render the fixed overlay inside the header, it covers both the header and the main page, but not the sidebar.

Is it possible to trigger a global fixed overlay from the header component directly, or do I need to use React context or another form of global state to achieve this?

https://codesandbox.io/p/devbox/mantine-react-template-forked-x8ys9g

[rtivital]

You can use the Portal component to render the Overlay outside the current element z-index stacking context.

[yhranik-vp]

Thanks, it worked 🎉