About: Add the full About section menu to the About pages

[ryelle]

Update the local navigation in the About section to be consistent across all About subpages, and add the menu to the main About page.

Requires WordPress/wporg-mu-plugins#570. Fixes #385.

Note: This does not add any of the iterations proposed in WordPress/wporg-mu-plugins#535, it only updates the navigation content.

This change makes _nav-about-details.php, _nav-about-people.php, and _nav-about-technology.php have all the same content, but I've left them separate in case we decide to bring back this semi-sectioning idea. Happy to switch to a single _nav-about-subpage.php file instead if we'd rather be aggressively DRY. Update: Changed this to _nav-about-subpage.php, removed the other files, and updated all the page templates to call the new pattern.

Screenshots

Default	With dropdown open

And on small screens:

How to test the changes in this Pull Request:

Use WordPress/wporg-mu-plugins#570 for mu-plugins, otherwise there will be PHP errors.

1. View the About page
2. There should be a local navigation bar with 3 dropdowns
3. Click any page, the same navigation should appear on the subpages
4. Try the same with a small screen, the navigation should work as expected
5. View a Download subpage, there should be no change to the navigation here
6. View the footer of the About page, the 3 menus in the page content should still work

[adamwoodnz]

Happy to switch to a single _nav-about-subpage.php file instead if we'd rather be aggressively DRY.

IMO lean towards YAGNI

[adamwoodnz]

Nice, I always thought we needed sub nav for this page 👏

Works for me, I did notice that the focus outline is cut off when operating via keyboard:

Outline colors look a little off too, (not blueberry?) but maybe a more widespread issue, I see it in the page content too.

Maybe this should be addressed in WordPress/wporg-mu-plugins#535, but is it worth trying to align the top of the overlay with the bottom of the nav bar? Question for @WordPress/meta-design I guess. I notice that the global header overlays don't quite align either:

[jasmussen]

Good catch, that looks like the default focus style. I think in some other pages we have a customized 1.5px box shadow. That'd be nice to just apply across, if possible. It can be inset to avoid being cropped.

[fcoveram]

@jasmussen's suggestion is documented in the local nav components as part of WordPress/wporg-mu-plugins#535 designs

[ryelle]

Works for me, I did notice that the focus outline is cut off when operating via keyboard:
Outline colors look a little off too, (not blueberry?)

Yeah, as @fcoveram mentions, that will be applied with the other local nav improvements in wporg-mu-plugins.

is it worth trying to align the top of the overlay with the bottom of the nav bar?

The design has it offset like this (note that we can't have a different submenu background + mobile overlay background, which is why I went with the tan). This is also how the nav menu works by default, so it was easier to leave it be :)

[adamwoodnz]

LGTM

[fcoveram]

The design has it offset like this … This is also how the nav menu works by default, so it was easier to leave it be :)

Fully agree.

note that we can't have a different submenu background + mobile overlay background, which is why I went with the tan

Perfect. I'll update mockups for documentation purposes.