Closes #5638: Update experimental AZ Navbar Fullscreen for Arizona Bootstrap v5.1.4

[bberndt-uaz]

Description

1. Updates AZ Navbar Fullscreen Menu Block twig template to account for changes from Arizona Bootstrap v5.1.4.
2. Updates AZ Navbar Fullscreen Menu Block styling to account for changes from Arizona Bootstrap v5.1.4.
3. Adds schema for the AZ Fullscreen Nav Menu Block settings.
4. Update handling of wordmark logo to use the logo image from the Arizona Bootstrap source (external or local).
5. Adds hook to modify search block form input placeholders and aria labels when AZ Navbar Fullscreen is enabled.
6. Adds hook to modify search block form submit buttons when AZ Navbar Fullscreen is enabled.

Questions

1. The hooks added by changes 5 and 6 above modify all search block forms when AZ Navbar Fullscreen is enabled. In practice, I think this should work, but does anyone know of any issues this could cause? Should we merge in this change for now and try to find a better solution in a follow-up (possibly when Quickstart fully adopts components)?

Related issues

• Update experimental AZ Navbar Fullscreen for Arizona Bootstrap v5.1.4 #5638

How to test

1. Go to Arizona Barrio settings (/admin/appearance/settings/az_barrio), then go to Components -> Navbar Behaviour and check the "Enable AZ Navbar Fullscreen (experimental)" checkbox.
2. Go to Block Layout (/admin/structure/block) and in the Navigation Bar region, disable the "Main navigation" block.
3. Still in Block Layout, add a new "AZ Navbar Fullscreen Menu" block to the Navigation Bar region and configure the desired menus and search form blocks (az_barrio_search for the desktop navbar and az_barrio_offcanvas_searchform for the offcanvas modal).
4. Clear cache.
5. Confirm the new navbar still works on both desktop and mobile. Confirm there are no errors in the browser console or Drupal log.

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.

[djcelaya]

In Bootstrap, we will add some bottom spacing to the last item of each navigation column in the modal menu to prevent the bottom fade overlay from drawing over the menu items when the column is taller than the available space.

Observed while reviewing this PR. AZBS issue incoming. See AZBS#2110.

[djcelaya]

What do you think about "Search" versus "Search this site" in both the modal and non-modal views? The mockups suggest just "Search" but is that too literal?

[bberndt-uaz]

What do you think about "Search" versus "Search this site" in both the modal and non-modal views? The mockups suggest just "Search" but is that too literal?

I would certainly like to match the mockups. However, currently changing this text would affect the default Arizona Header as well, so I'm hesitant to do that (at least, not without some AZ Digital discussion). I think it's a similar issue to figuring out how to implement the new search icons for AZ Navbar Fullscreen while maintaining the existing search block forms.

[camikazegreen]

What do you think about "Search" versus "Search this site" in both the modal and non-modal views? The mockups suggest just "Search" but is that too literal?

For Arizona.edu specifically, the search experience will search our whole ecosystem of sites.

[az-digital-bot]

Tugboat has finished building the preview for this pull request!

Link:

• https://pr5687-wpq3kx0muuqweg9jnjptwypnte5fidsq.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/6a2c948a3efbd1880faab24f

[djcelaya]

I am seeing intersection of the mobile nav items with the modal header when vertically constrained. This will need to be fixed on the Bootstrap side and I don't think it should block this. I'll make an issue.

[djcelaya]

It's really coming together!! The new search icon and text look great as well.