Full screen menu

[mule-stand]

*For simplicity, I'm going to use style props for styles
I have a header and a menu button in it.
When I click on the button, I want to open a full screen menu under the header (full screen width and remaining height).
I decided to use Dialog for this purpose.
I set a fixed height for the header (60px) and set styles for Dialog:

 style={{
  position: 'fixed',
  top: 60,
  bottom: 0,
  left: 0,
  width: '100%',
  overflowY: 'auto',
}}

First question: is it a good idea to choose Dialog for this at all?
Second question: problem with closing the menu, I want to open and close it with this button, but I can't interact with items outside the dialog. I specifically want the menu to open and close through this button, no body scroll is possible, and nothing happens when interacting outside with other elements (except DialogDisclosure) (I can partially do this with hideOnInteractOutside). Ideally I can use getPersistentElements, but it doesn't look very nice and requires additional mental load to keep track of it. How can I solve my problem?

Translated with DeepL.com (free version)

[diegohaz]

Yes, it looks like a Dialog.

If you want to make it modal, but keep an element outside accessible (the disclosure button), getPersistentElements is the way to go.

I'm not sure I understand how it's difficult to keep track of. Don't you have access to the disclosure element?

[mule-stand]

I have access to the disclosure element.
I just thought there was already some kind of customization for that.
Well there is also another problem, I said that this is basically a window that is indented from the top of the screen equal to the height of the header, but the problem is that it is not tied to its bottom, so, for example, if I scroll down the page a bit, so that half of the header was not visible and click on the menu button, I get that between the header and the modal window will be visible part of the page content.
Maybe a better way would be to render just a full screen modal window with just a duplicate header on top? Then there will be no need for getPersistentElements, but at the same moment it will be essentially duplicating exactly the same component.

Translated with DeepL.com (free version)

[diegohaz]

If I've got it right, this occurs because the dialog has position: fixed. If you turn off the portal prop and use position: absolute, you might manage to keep the dialog linked to the header. Alternatively, you could experiment with Popover and set the modal prop to true.

[mule-stand]

Maybe I should use Popover, but the problem is that visually I want it to be bound to the header block itself (i.e. positioned relative to it), but its opening and closing is triggered by a specific element (burger button). Is there such a possibility and is this the right way? For example, you use Popover to show the latest updates on the right side of the header and its upper border clearly coincides with the lower border of the header, although maybe it's just a coincidence.

[diegohaz]

The header popovers in the Ariakit site use the gutter prop. You can also use getAnchorRect to return the header element's bounding rect.