Improve off-canvas nav

[danahertzberg]

Motivation

I want a more intuitive mobile navigation experience.

Solution

• [ ] Change background color to Gray 200
• [ ] Accordion expand first level
• [ ] Page to third+ levels
• [ ] 'Chevron right' icon after text for pages
• [ ] 'Add' icon for accordion expansion
• [ ] 'Chevron left' icon for back one level
• [ ] Show only parent on paged menus - gray 100 background color
• [ ] Active page style: bold, white background, 5ps left border azurite
• [ ] Open menu to active page
• [ ] Update menu to close on Esc (accessibility improvement)

Mockups

https://xd.adobe.com/view/f6e5f645-0f67-4dcd-b564-b9b2a2b4bdd9-a3b6/screen/6e70c23d-e09c-42ae-8087-219fe4eb3e2f/

Context

Meeting notes Material icons

[danahertzberg]

Relates to https://github.com/az-digital/arizona-bootstrap/issues/527

[danahertzberg]

Consider bootstrap 5 configuration before development https://getbootstrap.com/docs/5.2/components/offcanvas/

[danahertzberg]

User testing takeaways

• Consider separating chevron into a separate touch target. Parent page was not visually understood as clickable.
• Top level nav is best served with an accordion experience since top level can't be a page and a menu.
• Users often navigated to homepage to start new task.
• Prototype "C" with accordion and pages was most preferred.
• Everyone completed all tasks easily (yay!)

https://docs.google.com/document/d/1QiCfZzEehS0kBqyo4NxwNxCrUXGqj_eHk9FKtf6zNPg/edit?usp=sharing

[danahertzberg]

• Nested menu rendering impact on performance needs to be researched
  • Completing functionality changes only within a week seems ambitious
  • Add paged functionality
  • Remove sidebar menu block from mobile display
  • Add current page visual indicator