mdn
enhance(design): improve style of current item in menu
Summary
(MP-1103)
Problem
- The contrast of the highlighted menu item is too low in the light theme.
- The menu highlights the current page in the menu by reducing its visibility, which is counter-intuitive.
Solution
Inverse the menu highlighting, reducing the opacity of the inactive items using opacity: 0.775, and increasing the contrast of the active item by switching from --text-secondary to --text-primary, which is the same color used for the MDN logo.
Note: Also removes the --text-active variable, which is no longer used.
Screenshots
| Theme Before/After | Screenshot |
|---|---|
| Light Before | |
| Light After | |
| Dark Before | |
| Dark After |
How did you test this change?
Ran yarn dev and compared http://localhost:3000/en-US/docs/Learn locally against https://developer.mozilla.org/en-US/docs/Learn.
Adding regression on stage currently, most noticeable in dark mode. Open the profile menu on a page with a content behind the menu, like https://developer.allizom.org/en-US/docs/Web/JavaScript and then use a mouse scroll motion to navigate the page. Notice the menu's opacity is decreased and it has become see through.
Adding regression on stage currently, most noticeable in dark mode. Open the profile menu on a page with a content behind the menu, like https://developer.allizom.org/en-US/docs/Web/JavaScript and then use a mouse scroll motion to navigate the page. Notice the menu's opacity is decreased and it has become see through.
Good catch, thank you! I pushed a fix, and it's being deployed to stage now.
I don't want to bikeshed here, but I don't like this design: it doesn't make sense to me. I can't think of any other site which shows the active section of the site by making the links to the other sections lower contrast. The active section should be shown with an underline, or some other distinguishing feature, not by making the rest of the links hard to see.
Closing in favor of upcoming frontend work, which includes a redesigned menu.