Pajamas navigation refinements

Purpose

A followup from #1443 (closed) to further refine the navigation with the following:

  • Update the Pajamas lockup and ensure a common left edge (alignment) for all elements.
  • Ability to expand multiple sections at once. This is a common accordion-like pattern that would allow a user to compare the options in different sections. While this UX might not be ideal for some sites, it can be a benefit for a user of Pajamas to get a better understanding why there are Form elements in one section, and Forms in another.
  • Sticky expanded sections. Since some sections (like Components) are quite long, having the parent category item sticky when expanded can help a user maintain context for the current section they're navigating.
  • Update design of search to be more integrated into the sidebar (inspired by the recent update to the dropdown design).
Before After
CleanShot_2022-11-15_at_15.27.07_2x image

Figmacon.svg View the working file in Figma →

Note: The before screenshot is from !3115 (merged)'s review app.

Edited by Jeremy Elder