Problem
When a user is looking at hamburger menu, the menu does not show which page they are currently on.
There's also no standard appearance change on pointer device when hovering a menu item (background-color, color change)
Solution
Use selected state for menu item from which the hamburger menu was triggered.
Example
- User is looking at nearby article.
- user taps on navigation drawer
- user sees Nearby menu item selected
Some menu items are not destinations (random, article namespace) for them do not highlight any menu item
this applies to User, settings, nearby, main page etc
Mock and spec
https://zpl.io/Z2cpOSU
Notice the Home menu item is highlighted with Blue, the icon is blue and there is a sidebar for accessibility. all three combined indicate Home is selected and is where you are right now.
Developer notes
The tricky part here is making the icon blue. We don't want to have to ship an additional icon asset for every single main menu icon.
CSS filters can be used cheaply (there is a patch somewhere), but do not enjoy full browser support. Note this technique is used on the main menu in https://trending.wmflabs.org/
HTML:
<svg> <filter id="filter-progressive-icon" colorInterpolationFilters="sRGB" x="0" y="0" height="100%" width="100%"> <feColorMatrix type="matrix" values="0.2 0 0 0 0 0 0.4 0 0 0 0 0 0.8 0 0 0 0 0 1 0" /> </filter> </svg>
CSS:
.item { -webkit-filter: invert(1) url(#filter-progressive-icon); filter: invert(1) url(#filter-progressive-icon); }