More control over mobile navigation

Hi @brockfanning,

The following is an overview of what I believe we need, (to help me understand our needs as much as anything) mapped to what we already have whenever possible, including some tidbits regarding the first sidebar navigation because (based on the https://standards.usa.gov website) the first sidebar navigation is closely tied to the navigation in the header.

For the USWDS navigation to work like the standards website linked above we need three menu regions.

1. Mobile Nav (fully expanded)
2. Desktop Nav (first level only)
3. Sidebar Nav (fully expanded - supplements the Desktop Nav)

Mobile Nav - seems we can repurpose the logic currently associated with the $uswds_primary_menu variable (regions[primary_menu]) with a slight modification so parent items get duplicated at the top of child lists. In the page.tpl.php file I think we'd want to leave this output wrapped in the

<nav class="usa-nav" role="navigation">

because this matches the standards website. I think we'd want to allow additional blocks if necessary (again to match the standards website - they have a list of buttons in play after the mobile menu )

CSS - we would need to modify the theme CSS to hide this region on large displays.

Note: It may be sufficient to not change the name for this region since the standards website simply refers to this region as the usa-nav. We could note that the output will be themed for mobile devices in the .info file however for site builders.

Desktop Nav - This would be a new region with a new section added to the page.tpl.php. Checking the standards website once again. Above

<nav class="usa-nav" role="navigation">

in the DOM there is

<nav class="site-nav-secondary">

The contents of this region is a single flattened menu only showing the first level links. New preprocessing could be added for menus added to this region so the output is guaranteed to be flat.

CSS - we would need to hide this item on small screens.

Sidebar Nav - I added this here because I noticed that the sidebar nav completely disappears along with the flattened Desktop Nav on small screens on the standards website. I'm not sure how we want to handle this though. It is possible site builders may want to add other non-menu blocks to the first sidebar and we wouldn't want to hide those on small screens. Do we need a menu specific region alongside the sidebar_first region inside the first aside in the page.tpl.php?

Interested in hearing your thoughts @brockfanning. If we can nail down what the needs are I'm happy to assist with writing a patch to address these items.

@brockfanning - testing this now. I'll report back ASAP.

@brockfanning - when you tested this locally did you encounter any issues with the show/hide functionality in the mobile nav? On my sandbox I'm seeing odd behavior. If I have a 1st level parent menu item with children I can click the button to show the 2nd level submenu and the parent link is repeated (AWESOME) but if one of those 2nd level children is also a parent link with a submenu clicking the 2nd level button to expand the 3rd level submenu actually collapses the 1st level parent instead of expanding the 3rd level submenu.

@brockfanning: thanks, trying that out now. We'll probably want to update the uswds/examples/my_subtheme/my_subtheme.info.rename-me file to use the URL for the uswds-1.2.1 zip file since these changes now depend on that version of the library.

https://github.com/18F/web-design-standards/releases/download/v1.2.1/usw...

@brockfanning, the 1.2.1 version of the USWDS javascript did the trick.

I believe this D7 patch is likely good to go. I'll do more testing but so far things look great.