Page MenuHomeElementl

[dagit] RFC: Collapsible left nav

Authored by dish on Apr 6 2021, 6:12 PM.



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.

Diff Detail

R1 dagster
Lint Not Applicable
Tests Not Applicable

Event Timeline

dish requested review of this revision.Apr 6 2021, 6:22 PM

Patched this down and played around with it, looks great! It ended up not being as much code as I'd imagined too. I vote we ship it soon and see if folks have feedback on master.

This revision is now accepted and ready to land.Apr 7 2021, 3:41 PM

Sanity checked this in Safari and Firefox as well.

This revision was automatically updated to reflect the committed changes.