Story: NCIDS Mobile Menu

[andyvanavery]

As a user of the NCIDS Documentation Site, I want the site navigation to be formatted for mobile use so that I can access and navigate the site from any device.

Requirements

• The mobile navigation shall be of the mobile menu structure and it will match the cancer.gov mobile menu
• The mobile navigation shall contain the categories as described in the site map NCIDS for All - Sitemap.pdf
• When the user opens the mobile navigation on the home page, the navigation shall display the navigation sections
• When a navigation section has sub-pages, the navigation section shall have a ">" at the right side of its menu section to indicate that it has sub-pages
• When a navigation section does not have sub-pages, there shall be no symbol on its menu section
• When a user clicks on a navigation section, and the navigation section has sub-pages and is an L1, the mobile menu
  will display "< Main Menu" at the top, followed by "Explore ", followed by the subpages of that section.
• When a user clicks on "Explore ", then the user will be redirected to the landing page of that section.
• When a user clicks on a navigation section, and the navigation section has sub-pages is an L2 or lower, the mobile menu will display "< Back" at the top, followed by "Explore ", followed by the subpages of that section.
• When a user clicks on a navigation section, and the navigation section does not have a sub-page, then the user will be taken to that page
• There shall be an "X" in the top right corner of the mobile menu to allow the user to close the mobile menu
• If the mobile menu is open, and the user clicks/touches outside of the mobile menu area, the mobile menu shall close
• If the user is one (1) level below the top level, there shall be an indicator for the user to return to the main menu by using the linked text "Main Menu", on top left of the mobile menu

Acceptance Criteria

Scenario: A user of the NCIDS Documentation Site views the mobile menu
  Given the mobile menu has been updated on the documentation site to match the structure of cancer.gov
    And the user is viewing the site at a breakpoint where the mobile menu appears
  When the user is on the home page of the NCIDS Documentation Site
    And the user opens the mobile menu
  Then the user should see an 'X' to close the menu in the upper right
    And all L1 navigation sections should appear below
    And if for all L1s that have subsections, a '>' will appear to the right of the section name
  When the user clicks on a navigation section with subpages
    And the navigation section is an L1
  Then the user should see an 'X' to close the menu in the upper right
    And the first item shown should be '< Main Menu'
    And the second item should be "Explore <insert section name>"
    And the following items should be the subpages of that section
  When the user clicks on "Explore <insert section name>"
  Then the user will be brought to that section landing page
  When the user clicks on a navigation section with subpages
    And the navigation section is an L2 or lower
  Then the user will see an 'X' to close the menu in the upper right
    And the first item shown is '< Back'
    And the second item is "Explore <insert section name>"
    And the following items are the subpages of that section
  When the user clicks on a section that does not have any subpages
  Then the user will be brought to that page

Resources:

• Main Menu Ticket: Build Out Main Navigation on the Documentation Site #809
• NCIDS for All - Sitemap.pdf

Notes

---

Solution

Prerequisites

Tasks

Technical Notes