Design and implement mobile/tablet header & nav

[jenniferthibault]

@noahmanger here are some mockups for various scenarios. Sorry it's a lot, glad to talk through any questions!

Tablet:

Tablet expanded:

Mobile w/ footer:

Mobile expanded:

Mobile sub-nav:

Full header w/ breadcrumb

Mobile header w/ breadcrumb

Mobile header w/ search

[noahmanger]

Ok I took a first pass at this, but now I have some questions:

• I'm worried about replacing the glossary button with the search button on small screens. It raises a bunch of questions: does the search button only show when you're on the data side? How does the glossary work now? It feels weird to have a link in the menu activate a panel on the other side of the screen.
• That said, I'm a fan of losing the search box in the breadcrumbs on small screens, just because it will really take too much space. Maybe we just don't have it on those pages? Or maybe it lives in the menu dropdown?
• Last, what should we do about the "Beta" status? Maybe it's enough to just have it on the home page? I don't know.

[jenniferthibault]

I think we talked through the first two points the other day, but just to capture them here for clarity (and to make sure I came away with the correct info...)

• We drop the glossary icon from the top nav area entirely on mobile, since it could be a competing feature, instead of a helpful tool. glossary will still be accessible by tapping a word with the book icon, it just won't be in the top nav. Maybe it becomes an element in the footer nav?
• On mobile, the last view shown here is the search bar expanded—does that still make you think it's takes up too much space? regular view would only be the icon. Since on the desktop version, the search only appears in the data side (since there isn't universal search) it would keep stay consistent. (thoughts?)
• I think it's ok to drop "beta" status everywhere but the home page.