Navigation Block: Sidebar/Inspector control improvements & allow always-collapsed menu

[jasmussen]

What problem does this address?

The inspector controls for the navigation block have grown organically and is deviating from proposals in #27331 and #27473 (comment) in a few ways.

Additionally, with improvements ticketed in the following issues, it will be necessary to add some new controls:

• Navigation Block: Add separate overlay color option #29963 Add separate overlay color option
• [ Navigation Block ] Make it Mobile Responsive #22824 Make it responsive

This ticket serves to provide a path forward for the design of the navigation sidebar.

What is your proposed solution?

A few things here, but note that each of these can happen as separate steps, and should be looked at holistically in context of #27473 and #27331:

• Instead of adding additional panels that expand and collapse, show foundational functionality of the block right in the first panel, and retire the "Display settings".
• Simplify and reduce the labels of the panels. "Color" instead of "Color settings",
• Show a small preview of the mobile menu, and how it is affected by the toggles below.
• Use a new segmented control (from Sidebar Controls & Component System #27331) to let you toggle between showing the burger never, mobile or always.

"Unfold nested submenus"

Part of this mockup is also a new toggle in the submenu category, to let you unfold nested submenus. That is, instead of having to expand out in ever expanding menus like this:

... nested submenus would expand like this:

[shaunandrews]

Everything here seems super great, except for the mobile menu preview thing; I don't quite understand it's purpose, and with the design shown it's not obvious what it actually is/does.

[jasmussen]

Absolutely. The "feature card" at the top is something I think will either start to make sense in a PR, and take shape as part of that, or reveal itself to not work in practice.

It is inspired by some of the Global Styles patterns and aims to elevate the sidebar from being a dull sequence of form widgets to adding some character to each block.

[mtias]

Where are we with this one now that the component is ready?

[jasmussen]

There are some fresher mockups for this one here: #18395 (comment)

[jasmussen]

Changed this one to an overview issue, where #34783 exists as a separate ticket. I'd love to pair on that one.

[jasmussen]

The recent #35568 PR actually accomplished most of what's on this list. Except for this one:

Instead of adding additional panels that expand and collapse, show foundational functionality of the block right in the first panel, and retire the "Display settings".

This item was added to embrace one of the patterns being explored for Global Styles in #34574, but is arguably best tracked separately, as it is a pattern that can/should be applied to all blocks, not just navigation. In that vein, I'm going to close this one, and follow up with a separate ticket once those pieces come into more clarity.

[mtias]

Another thing we don't have is the "preview". Also using it in practice I think we can add more contextual info for each state. (As in, update the help description based on what option is set to better communicate what is going on.)