Add high-contrast indicator to active sidebar item

Open gcamacho079 opened this issue 3 years ago • 1 comments

Description

Resolves DEV-372. Also fixes left sidebar edge going offscreen on small screen sizes.

Shows global and index sidebar navigation with a bar on the left side of the item to show the active page

Related issues

Jul 12 '22 18:07 gcamacho079

DEV-372 Active sidebar button does not meet minimum contrast requirements

Active state has a 1.28:1 contrast ratio for the outline applied to the button

Adding a border of 1px solid #6C84A7 on the selected state would give this component an acceptable contrast in comparison with the other sidebar items

Screen Shot 2022-03-18 at 2.44.38 PM.png

Resolves CMS-063

Jul 12 '22 18:07 linear[bot]

Wasn’t loving the added indicator strips—they felt a little too noisy—so went with making the entire active nav items high-contrast instead:

Screenshot of a control panel page, showing that the active global nav item and the active subnav item each have a high-contrast background color, relative to their containers’ background colors.

Aug 11 '22 22:08 brandonkelly