Closes #4872: Update desktop nav with collapsible sidebar option

[bberndt-uaz]

Description

🚨 This is a work-in-progress PR intended primarily for front-end review.

Currently, this PR includes four different options for the button and behavior of the Sidebar Collapsible region. You can try out these options by going to Appearance > Arizona Barrio Settings > Layout and selecting one of the options from the temporary "Sidebar Collapsible button display style" setting.

Key notes about the new Sidebar Collapsible region

• This region does not replace the Sidebar first region. Blocks (including the "Sidebar menu" block from Quickstart) can be moved from the Sidebar first region to the Sidebar collapsible region.
• The region is wrapped in a container that has the collapse button markup and behavior.
• When the Sidebar Collapsible region is displayed, full-width paragraphs are resized to fill the remaining width of the browser window. Content-width paragraphs are limited to the standard container width and centered within the remaining horizontal space.
• Currently, the sidebar has a fixed width of 288px when it is shown.
• The Sidebar Collapsible menu block is set to display on pages starting with second-level menu items. The final version of the menu block is intended to show on third-level pages instead. We can update this PR once the primary navigation supports three menu levels.

To Do (includes items from discussions with central marketing)

• Convert the sidebar to an azurite background color like the mockup, update other styling as appropriate
• Ensure only one submenu is open at a time (matching the behavior of the navbar)
• Add a drop shadow to the breadcrumb region
• Add a drop shadow to the right of the sidebar
• Further work to ensure correct sizing of content-width and full-width paragraphs
• Fix focus styling for menu anchor elements
• ...

Release notes

To be completed.

Related issues

• Update desktop nav with collapsible sidebar option #4872

How to test

Review site: https://pr5069-pjkjevrptq2v5mpjjvuvfejfan2zkrpd.tugboatqa.com

Note: You will likely need to edit the main navigation menu for testing purposes (for example, rearranging the Pages subtree to create deeper menu levels).

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

• Patch release changes
  • Bug fix
  • Accessibility, performance, or security improvement
  • Critical institutional link or brand change
  • Adding experimental module
  • Update experimental module
• Minor release changes
  • New feature
  • Breaking or visual change to existing behavior
  • Upgrade experimental module to stable
  • Enable existing module by default or database update
  • Non-critical brand change
  • New internal API or API improvement with backwards compatibility
  • Risky or disruptive cleanup to comply with coding standards
  • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
• Other or unknown
  • Other or unknown

Drupal core

• Patch release changes
  • Security update
  • Patch level release (non-security bug-fix release)
  • Patch removal that's no longer necessary
• Minor release changes
  • Major or minor level update
• Other or unknown
  • Other or unknown

Drupal contrib projects

• Patch release changes
  • Security update
  • Patch or minor level update
  • Add new module
  • Patch removal that's no longer necessary
• Minor release changes
  • Major level update
• Other or unknown
  • Other or unknown

Checklist

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• My change requires release notes.

[bberndt-uaz]

To do:

• Content-width paragraphs should maintain content width, centered within the main content container (which is now fluid).

Per AZ Digital discussion, we confirmed that the sidebar should be displayed by default on every page (that is, it should not be a setting allowing a visitor to keep the sidebar collapsed across multiple different page loads).

[az-digital-bot]

Tugboat has finished building the preview for this pull request!

Link:

• https://pr5069-pjkjevrptq2v5mpjjvuvfejfan2zkrpd.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/691df5716ea32234340d7445