Navigation: Mobile "Close" icon misplaced

[beafialho]

Description

It’s frustrating that the X button doesn’t sit in the same place as the hamburger icon. I'd expect it would sit on the same area.

Step-by-step reproduction instructions

1. Create a navigation menu
2. See the site on mobile
3. Notice how the icons are misplaced

Screenshots, screen recording, code snippet

navanimation.mp4

Environment info

This happens with every theme and in the latest Gutenberg version.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[jasmussen]

I have a potential fix in #43576, that needs a sanity check. If we're able to land it, it will require a theme to do a few things in order for it to work:

• The theme opts into root paddings (Core CSS support for root padding and alignfull blocks #42085), by adding "useRootPaddingAwareAlignments": true in theme.json under settings, and paddings to go with that either in global styles or under styles > spacing.
• The Header template part contains a group that inherits layout, with navigation inside that.
• The collapsing navigation block sits in the top right corner of the header, justified right.