Feature(UI): Left Side Colour on Navbar Dropdown links should be visible on hover and not by default

[theNaut1lus]

Hey, I am very much interested in this new project and want to do my part by working on this.

I was going through the website and what I realised would be a good UI design option would be to make the Blue(Turquoise) Sidebar alongside the left of every Navbar dropdown link white and merge with the background and become visible (like they are in their current state) when we hover over these links.

I have tried to explain this in the screenshot attached

I would also like to work on this as my first contribution here. 🥇

[codehag]

I think a different hover option is a good idea, but removing that bar may cause the menu to blend into the background.

Can you think of a couple of alternative ways to make it clear what is being hovered? (also, I will be away for some time, if I am not responsive it is because of that)

[theNaut1lus]

@codehag I feel when we hover over the specific dropdown item, then the left sidebar should be visible while the rest (non-hovered) items will remain non-visible

[codehag]

As mentioned in my previous comment, this proposal is not the right solution here. It will cause the menu to blend with the background and is not good for the visual identification of the menu.

[Regaddi]

@codehag What do you think about #777 for unhovered elements and the green tone for hovered elements (the currently used color)? I think it's not ideal, maybe a lighter green tone might be more suitable, otherwise it's too much grey IMO.

I don't have great design skills. It's only my initial thought on this issue 😄

[codehag]

@Regaddi that is looking a bit more interesting. I won't be able to give much feedback for the next month as I will be away, but please feel free to iterate on it, you two.

[theNaut1lus]

@Regaddi The first example you are proposing does seem to be much better as is overcomes the problem that @codehag feels as it won't blend with the background.

The second option is a little less preferable to me as adding a lighter shade would mean introducing another shade of colour into the existing palette (here I am assuming that there is a use of a fixed colouring system with the use of variables)

[Regaddi]

@co16353sidak I think both colors used by me are not part of the palette yet. As far as I can see there is no color in the "medium color range" that suit well for the kind of visual separation we're looking for here.

In the content section we only use #fafafa and #eee grey tones. Besides that only the green tone #00796b and black #000 are used.

Maybe @zoepage has some good thoughts on it? 😄

[theNaut1lus]

@Regaddi even the grey #eee would be suitable for the first example.

[aardrian]

Please consider low-vision and color blind users when picking your colors. As it is, this menu would benefit from darker colors, more contrast, and clearer borders, not less of each. Ensure any changes you make also support keyboard-only and touch users, who cannot hover.

That being said, WCAG 2.1 SC 1.4.3 Contrast (Minumum) provides the needed minimum contrast ratios and a related techniques document provides links to tools.