Page MenuHomeElementl

[dagit] RFC: Collapsible left nav
ClosedPublic

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

Details

Summary

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

Repository
R1 dagster
Lint
Lint Not Applicable
Unit
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.