Add a new CSS component for sidebars.
Review Request #10658 — Created Aug. 15, 2019 and submitted — Latest diff uploaded
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:
It's not ID-based, so there can be multiple instances (which will
eventually be useful for the mobile menu).
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).
The structure of the menu is also more shallow, as we're eliminating
the "row" element within each item.
The sidebar has a bit more width, preventing items from being truncated
Wrapped content in items are now vertically-aligned properly (labels,
icons, and values).
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).
Item types are extensible, giving us more flexibility going forward.
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.