ENH: Move header items to sidebar on mobile

[choldgraf]

This is the implementation that I used to show the preview in #833 - it is actually pretty close to complete if people think that this is a good UI/UX for the navbar / sidebar content. It does this:

• Duplicates our center and end header items in the sidebar.
• Wraps those items in the sidebar only show up on mobile screens.
• Makes those items in the header only show up on wide screens.
• Moves over the @media queries so that they apply only to the sidebar items.
• Generalizes the navbar link styling to a component rather than being hard-coded in the section scss.
• Makes us use class names that are BEM-style, rather than IDs, for our theme and version switcher so we can have multiple
• Cleans up some duplicated CSS that was related to navigation links and sidebars
• Factors out the JavaScript that was embedded in our version switcher, and now uses a combination of global variables and puts the main JS into our index.js script.
• Standardizes some more CSS variables so that some items (like icons) behave the same in mobile/widescreen

Here's how it looks

To Do

• Agree this is a good UI/UX to use
• Wait for ENH: Search button shows up on mobile #832 and incorporate here
• Fix any remaining CSS bugs
  • "I am just seeing some spacing inconsistencies around the icons (GitHub, Twitter, etc.)."
  • Fix version switcher populating JS
• Double-check that the JS and CSS still work

Let me know what folks think.

• closes Show the sidebar toggle buttons with a pop-up when you scroll up #823
• closes Improve formatting of mobile drop-down menu #195
• closes Make the sidebar toggle buttons accessible as you scroll down the page #801
• supercedes FIX: Remove unnecessary padding for article header #831

Release notes

The header items are now duplicated on each page, and wrapped in <div>s that will alternate displaying at the sidebar-primary breakpoint. The effect is that the header items after the "start" block are inside the sidebar on mobile.

❗This changes the HTML of the theme and version switchers slightly!

[drammock]

beautiful. +10

[tupui]

Nice 👍 it's really a better experience on mobile. I am just seeing some spacing inconsistencies around the icons (GitHub, Twitter, etc.).

[choldgraf]

I will clean up the spacing inconsistencies and little CSS bugs if I know people like the general UI/UX :-)

[12rambau]

I love the idea !

[choldgraf]

Update: ready for review

OK I think this is one is ready for review. I've cleaned up the remaining CSS bugs that I found and included a bit more standardization of our variables etc. Let me know what you think.

[drammock]

nice job figuring out how to move the version switcher JS out of the template! This all looks good to me, though in the process of reviewing I found a few (unrelated) things to open issues about :)

[tupui]

This looks great 👍

About the version switcher, it's a breaking change on the styling correct?
We need to go from #version_switcher to .version-switcher__container? I am fine with this since we always update to the latest version of the theme (at least I do this for SciPy and NumPy).

[choldgraf]

indeed this would be a breaking change for any custom styling on the version switcher...though in general it feels like this is also a better practice to move to BEM-style classes instead of ids

[choldgraf]

Hey all - we've got 3 approvals, so I am going to merge this one in! Many thanks for everybody's feedback, I think this is a nice place to settle on for the sidebar UX!