Burger Menu

[wodenx]

User Story

As a site builder, I want to add base component that allows me to add a mobile burger menu to my site.

Background/Description

Acceptance Criteria

AC1: The Example/Test Site includes a Hamburger Menu.

AC2: Menu's initial states starts with a hamburger Menu

AC3: WHEN the Hamburger Menu is clicked the Menu is expanded

AC4: Menu can use the same data that is used to render the full scale menu (AESQ-1854) 

• If the Main Menu labels are edited, the change is reflected in the Hamburger Menu

AC5: Level 1 & 2 items are closed on initial load

AC6: Any item which has children renders it's title with no link, when the title is tapped the children expand with an "Overview" item that links to the URL that was on the title (how CANVAS works today see [h|https://www.johnsonsbaby.com/baby-products] [https://con-na-penaten-ca-en.uat2.canvas-building.jjc-devops.com/] under the Products section)

AC7: The submenu displays the same in both edit and non-edit static environments 

AC8: Run the component against an accessibility checker like WAVE and record any issues as a GAP ticket. 

AC9: Documentation should include that there is no Edit UI in the Mobile version. Any updates to the Hamburger Menu should be done via the Desktop Full Menu version (AESQ-1854) 

 

 

 

Implementation Notes

Design: https://jhdfdc.axshare.com/#g=1&p=starterkit_palette resize to mobile to see burger menu.

Libraries:

https://github.com/negomi/react-burger-menu
DEMO: https://negomi.github.io/react-burger-menu/
Very active library (110 releases with 26 contrib users)
has tests
GitHub:

References

[asiarheyeu]

#20 was merged. This item is in UAT

[asiarheyeu]

UAT Passed. Closing as completed