Mobile menu

[sstruemph]

Changes proposed in this pull request

This PR enhances the Core Navigation block's mobile experience. The styling is improved with left-aligned items that have spacing and bottom borders. The submenu's can be opened by clicking the arrow. The top menu item is added to the menu allowing it to be clickable to dropdown the menu and the first submenu item is the new link to the top menu item.

If the menu is "About us" and it has a submenu. Then the top item "About us" will only function to reveal to submenu rather than a link to the "About us" page. Then in the submenu, "About us" is the first link and takes you to that page.

This feature has been tested in several existing projects like: Parsons, Rising Bank, and MBC. In this projects it was refined and it is refined further here. Some issues were addressed like the submenu not opening on click the first couple of tries and the mobile menu was not hiding if you increased the browser width. This left it unstyled and covering the page until a refresh of the page by the user. There's a resize function that hides the menu when increasing the screen over 960 width.

Closes https://app.asana.com/0/1203895219649773/1206518703604992/f

Pre-submit checklist

As the author of this pull request, I verify that:

• I have set the target branch to master.
• I have detailed the purpose of this Pull Request in a non-technical way.
• I have detailed how to test the changes in the Pull Request.
• I have detailed the functional tests required for approval.
• I have performed a self-review of my code to ensure it is DRY and follows the team's coding standards.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• I have verified that my code does not introduce a debug warning in my local environment.
• I have verified that the functional tests work in my local environment.
• I have verified that all automated tests pass or have provided a detailed comment about why I am submitting with a failed pipeline.
• I have verified that any dependent changes have been merged and published in downstream commits.
• I have added a link to this Pull Request in the Asana task.
• I have moved the Asana task to "Ready for Functional Review".
• I have left a comment in Asana and GitHub tagging a team member with a request for `review.

Testing

How to test the changes in this pull request

Follow the steps below to test the changes in this PR.

1. Deploy this branch to the test environment: https://kindlingprd.wpengine.com/

Functional tests

As the functional tester for this pull request, I verify that:

• The test site has a generic menu added with parent pages and some submenus
• View the site on mobile and interact with the links. Tapping/clicking items without submenus should take you to that page. Items with submenus should reveal the submenu instead.
• Resizing the window over 960 should hide the menu
• The menu should be keyboard accessible.

Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana. If all tests pass, move the task to "Ready for Code Review" in Asana and tag a team member for code review.

Code review

As the code reviewer for this pull request, I verify that:

• All automated tests have passed.
• The code is written (or documented) in a way that is easy to understand.
• The code is free of obvious errors.
• The code is free of obvious duplication.
• The code follows our coding standards.
• The code is sanitized or escaped appropriately for any SQL or XSS injection possibilities.

Once testing is complete, notify the author of any failed tests and move the task to "Kick back" in Asana or continue with the "merging" steps below.

Merging

As the individual merging this pull request, I verify that:

• All automated tests have passed.
• All functional tests have passed.
• All code review tests have passed.
• I have moved the task to "Ready to Deploy" in Asana and notified the pull request author.