Refresh Sidebar component

[connor-baer]

Component to amend

👀 View Sidebar in Storybook

Design

In my opinion, the heavy use of a washed-out grey makes the sidebar look heavy, unappealing, and dated. I suggest changing it to a light color and using shadows, lines, or other ways of separating the navigation from the main content. This would also play better with dark mode 🌙 (#788).

Update: The design team seems to agree. This is a very early mockup of the redesigned sidenav (sorry for the bad quality):

The diversification of SumUp's product portfolio has led to the crowding of the sidebar. We've tried to counter this by grouping related items and hiding them behind an aggregator. This saves space but hurts discoverability. The purpose of the aggregator item itself is not clearly defined: when clicked, should it expand its sublinks or navigate to a route? Currently, it does both, but on mobile, it also closes the sidebar, so the user never sees the expanded sublinks.

API

The nav links are wrapped in Circuit UI's Link component which can be overridden using the ComponentContext. This is cumbersome and not well documented. I'd like to deprecate and remove the ComponentContext in an upcoming major release. This means it should be up to the developer to wrap the nav item in a Link component.

Circuit UI exposes a SidebarContextConsumer to access a function to toggle the sidebar. Instead, we should expose the SidebarContext, so it can be used with the useContext hook.

[connor-baer]

Now available as the SideNavigation and TopNavigation components.