The active state of the navigation header is too sublte

[clagom]

During our meetings with Mark, he mentioned that on Vanilla level he doesn't think the current active state of the navigation header is clear enough. He did mockup this as an example, with the active link on a white background, similar to a tab:

We might implement this on CharmHub.io first.

Link: https://docs.google.com/document/d/1JzRjODk3UkZ-y2cg1SdG_RuOqMF0SkqN5uqyIa4G4Ig/edit

[lyubomir-popov]

@spencerbygraves @clagom @cassiocassio Some thoughts and a proposal ( in case there's room to negotiate :) )

https://miro.com/app/board/o9J_kqPIMZQ=/

[clagom]

Looks good to me, worth going back and propose it. Do we roughly know when this could happen?

[spencerbygraves]

@clagom we looked at this in the design review this morning. We discussed adding the white tab to Charm Hub for Montreal as per Mark's request, and having this in a separate branch to also show as a proposal.

[lyubomir-popov]

@clagom I can be ready with the proposal next week. Then maybe we can setup demos of vanillaframework.io, maas.io, snapcraft.io and charmhub to illustrate it better. It's a couple of lines of css so making a few demo prs is trivial.

[clagom]

Sounds good. The next Charm Hub meeting will be in the Virtual Montreal, maybe we can setup a session with you then. If not, the proposal can be presented in the next bi-weekly meeting.

[solazio]

Please consider medium to large screen sizes where the navigation buttons are wrapped on 2 rows

[lyubomir-popov]

@solazio By this point the nav should have switched to a mobile responsive version, truncating the less important part of the account email (should it use the provided email to begin with? Why not an alias or user name?).

But in case that happens unintendedly - and it has happened before - you're right it should look better. The proposal I'm working on would handle it like this:

[solazio]

@lyubomir-popov yes, the email will be replaced by an alias or name. In your case the highlighted part works fine, but in my case (full white) it looks very disconnected from the page.

[lyubomir-popov]

@solazio I'll make sure we highlight this when we explain why we are proposing an alternative to the full white highlight.

[lyubomir-popov]

I've made a case for an alternative treatment of the active page highlight here: https://zpl.io/bAoJGKp

Please take a look and comment.