[dagit] RFC: Collapsible left nav
Make the Dagit left navigation collapsible for smaller viewports. For wider viewports, the navigation will remain visible.
I have also increased the width of the left nav, since collapsibility affords us a bit more horizontal real estate. We can use this to add more interesting information to the nav.
For smaller viewports:
- The main content will now occupy the full width of the viewport.
- Show a menu icon next to the Dagster logo. Clicking this will slide open the nav, above the main content.
- The nav can be toggled using the . key, and closed with the esc key. When the icon has focus, it can be clicked using keyboard controls like any other focused button.
I have created a React context to manage the open/close/toggle behavior of the nav, so that it doesn't require passing the state around as props in a bunch of places. I have also made a few major top-level components React.memo to avoid extra re-renders when the nav is toggled.
Test Plan: See attached video.
Reviewed By: bengotow
Differential Revision: https://dagster.phacility.com/D7323