Update Communique Issues menu

[imcbride]

https://www.middlebury.edu/institute/communique

On this site we would like to change the first menu in the right nav to have a header labelled "Issues", clicking on which expands or contracts the list of menu items. The menu should begin in a collapsed state.

Stylistically, it can appear like other menus such as the one on the IEM site with "Issues" in place of "International Education Management" and the list of issues appearing indented below.

What, if any, markup and style changes do we need to make to support this?

[zebapy]

Would "Issues" have a page to navigate to or only be a button label?

[imcbride]

Right now there's no such page for it. We could make one, but a button label would work fine.

[zebapy]

Can we render the issues menu in another page-nav but above the other page-nav? Then we can add 1 modifier class to that issues page-nav to always show the mobile toggle button and use all the same markup.

The result would be

<div class="page-nav">
  <button>issues</button>
  <nav><ul>ISSUES MENU</ul></nav>
</div>

<div class="page-nav">
other menu
</div>

[imcbride]

Right now they're in the same <div class="page-nav"> so that the Additional Navigation toggler for mobile controls both. If we split them up would we need additional mobile togglers?

[imcbride]

I've fixed the bug that prevented the theme debugging from working on newsrooms so this is easier to see where the template breaks are.

view-source:http://saw.middlebury.edu/~imcbride/institute/communique

Thanks for moving the issue to the right project.

[imcbride]

Is there a class I can apply to a wrapper element or the <h2> so that the gray bar appears above the menu title?

[zebapy]

@imcbride I've added our suggested styles for these elements https://github.com/middlebury/frontend/commit/a70b04fc5ddf8f0336cdf969a628860cd4fe1b60

Note the page-nav__label class on the h2 and the page-nav__link--cta for the view all link.