Mobile menu coming from the top instead of the side

[akegan]

We just did a visual design review of our react homepage ahead of launch, and the design team found some design issues that they marked as blockers for deploy.

They had a couple of different pieces of feedback about the menu:

1. Different menus across different pages could be confusing

They noted that since we're going to be in a mixed state of angular and react pages for some time, that it might be confusing for users to have two different mobile menu experiences on different pages.

Did you consider keeping the same style of menu we had on DAHLIA where it came out from the side as a drawer? Were there technical limitations that prevented you from implementing it? Would you be open to switching to a drawer component that's more similar to what we have for DAHLIA if we contribute it?

2. Mobile menu pushes down content instead of sitting on top of it

(see image above). One designer noticed that the menu pushes down the content instead of unfurling on top of it and thought it was a bit strange. Was that an intentional choice? or a technical limitation?

cc @emilyshore

[akegan]

Could add an option to menubar to make it a drawer instead. Could be related to #1345.

We might also need to look into a11y on the mobile navbar to make sure that the focus works as expected.

Exygy folks are up for doing it as an overlay instead of pushing the content down.

Edit: goal is to keep the same component.

[akegan]

Next step is to write a unified story about desktop/mobile navbar and layout options.

[slowbot]

@akegan Starting to sketch the component and options for nav https://www.figma.com/file/tUtgsJO8XnF9Ij2dwu22EF/bloom-general?node-id=387%3A768