Improved mobile navigation layout

[curiousduck-dev]

What problem does this address?

The navigation block is probably one of the fastest evolving blocks in Gutenberg and it's certainly come a long way. However, in its current form each navigation is siloed, with no ability to interconnect different navigations. For example, each navigation block comes with settings for mobile navigation - whether it be disabled entirely, activated at breakpoint, or always active. If - as is often the case for a great many websites - a header template part contains multiple navigation blocks the current setup results in an ugly mobile state of two separate hamburger icons with two separate mobile navigations.

What is your proposed solution?

It would be brilliant if some interconnectivity could be established between navigation blocks. In this example, having the ability to add the top navigation block's link list to the main navigation block's mobile navigation would fix the above issue, along with an additional "hide on mobile" setting for the mobile navigation options. That way, on mobile sizes, users could hide the top navigation altogether (removing that ugly second hamburger) and display its link list as part of the main navigation's mobile menu, creating a cleaner UX.

Here's a screenshot of how things work current on desktop and then on mobile:

[paaljoachim]

I will add in this States issue which brings up among other things responsiveness.
#57719