Add a new CSS component for sidebars.

Review Request #10658 — Created Aug. 15, 2019 and submitted


Review Board


Our UI had 3 concepts for sidebars in the past, all a bit different.
There was the sidebar used in the Dashboard, the mobile menu, and the
administration UI. The one created for the dashboard was meant to be the
basis for a unifying one, but we didn't really have the concepts we have
now for sanely managing component styles, and the first implementation
wasn't quite right.

This change introduces a new, unifying sidebar. It's based on our newer
component standard, and offers several improvements:

  1. It's not ID-based, so there can be multiple instances (which will
    eventually be useful for the mobile menu).

  2. It no longer requires an onclick, as the entirety of each item is
    now a proper link (so opening in a new tab will also work).

  3. The structure of the menu is also more shallow, as we're eliminating
    the "row" element within each item.

  4. The sidebar has a bit more width, preventing items from being truncated
    as easily.

  5. Wrapped content in items are now vertically-aligned properly (labels,
    icons, and values).

  6. The scrollbar for the sidebar now appears on the far-left of the
    viewport, and not up against the content, giving more breathing room
    (a personal pet peeve of the old implementation).

  7. Item types are extensible, giving us more flexibility going forward.

  8. There's official support for section headers that work as navigation
    items (the Dashboard in 4.0 had a hacky way of implementing this

Currently, nothing makes use of this. Upcoming changes will move the
dashboard, admin UI, and mobile menu over to the new structure.

Made use of this in upcoming changes.

Tested that the original Dashboard sidebar (using the legacy styles)
looks and works as it did before.

  1. Ship It!
Review request changed

Status: Closed (submitted)

Change Summary:

Pushed to release-4.0.x (efd5a80)