HomeElementl

[dagit] RFC: Collapsible left nav

Description

[dagit] RFC: Collapsible left nav

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.

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://dagster.phacility.com/D7323

Details

Provenance
dishAuthored on Apr 5 2021, 7:49 PM
Reviewer
bengotow
Differential Revision
D7323: [dagit] RFC: Collapsible left nav
Parents
R1:978b4692ee50: [dagit] Enable extended search for global search
Branches
Unknown
Tags
Unknown