Add dropdown menu to header navigation

[choldgraf]

This adds the ability to place some of the header navigation links in a Dropdown menu rather than being displayed immediately. By default the first 5 header links are displayed, and the remaining ones are placed in a dropdown menu. The number that are displayed can also be controlled with a new configuration variable. This should help save space for sites that have many header links or long titles (I believe @mwaskom had a use-case like this).

I've also added a few extra external links so we can demo this on our docs, and set our number of displayed links to 4 instead of 5 (matching the links we already have)

Here's a quick example:

To do

• Folks agree this is a good idea, if no objections then:
• Get the tests passing

closes #571 closes closes #763

[12rambau]

I think it's a good idea and I like the implementation.

See my comment about the gallery change

[choldgraf]

Since this one is already improving the spacing of the header, I added flex-flow: wrap to this one so that we don't have overlapping header items.

closes #763

[choldgraf]

thanks for the reviews all!

[chrisjsewell]

@choldgraf there are a few issues with the styling:

1. It remains visible above the search bar:

2. The UI/UX on mobile is a little non-ideal (e.g. More is not left-aligned, and now you have to click multiple times to navigate)

Another thought, perhaps these "dropdowns" would use the select/option HTML tags.
For mobile, these are nice because they actually integrate properly with the OS, see e.g. https://www.aiida.net

Although, the only pain is that it is not as easy to "connect" them to a URL anchor: https://lazacode.org/2029/html-select-and-go-to-url-with-onchange-event-attribute

[choldgraf]

Thanks for that feedback - I opened up a new issue to track it here: #769