Bump menubar to left width of Inspector Panel when open #51
Conversation
|
An alternative to this solution could be to hide the menu buttons when the inspector appears, or similarly bump the menubar to the left the width of the inspector panel. |
pocka
left a comment
There was a problem hiding this comment.
The overlap was intentional, as the element is meant to be embedded and we have no control over width / height.
An alternative to this solution could be to hide the menu buttons when the inspector appears, or similarly bump the menubar to the left the width of the inspector panel.
This is the way. Menu buttons do not take much space and an inspector element has no animation, so shrinking menubar would be fine.
Are you suggesting adding the |
No, I was trying to say this,
is a good idea. However hiding the menubar sounds good too. I'd accept whichever as long as the code is simple. |
|
@pocka Per the description, I've updated this to reposition the menubar when the inspector panel is open. This is a much simpler solution, thanks for the feedback. |
This is a small fix for a minor accessibility issue, when the inspector is opened the menu buttons are no longer visible but can still be focused.
This implementation uses a intersection observer to detect when the.mb-menubarelement has been inserted in the document and sets a css variable--menu-bar-height, local to the shadow host, that is used to adjust the height of the inspector panel accordingly.If thedata-autohideproperty is set on the.mb-menubarelement, the.ip-rootelement is instead given padding and z-indexes are adjusted such that the menu bar can still appear above the inspector panel.I've updated this such that the menubar will move to the left in order to accommodate the inspector panel when it is open. This involves using a css variable,
--panel-width, to define the panel width and a.mb-root:has(+ .ip-root)css selector to change the menubar position when the inspector panel is present.