[www] doesn't show selected state along top nav bar

[shannonbux]

Initial problem

Many users, when they are on the Tutorial page, can't remember how to get back to Docs.

In an effort to solve this issue, I made a link to the Main Tutorial under Quick Start category in Docs. I also made a link to the Quick Start doc at the top of the Tutorial sidebar.

It appears this has created more confusion and didn't solve the initial problem. So that's getting taken care of in Issue #7424

Let's make sure we make the selected state along the top nav bar clear and see if it solves the initial problem.

[arzafran]

Let me know if I understood well and my approach fixes the issue.

[fk]

Thanks for adding this @shannonbux! 🙏

[fk]

Hey @arzafran! 👋
Thank you for your PR, looking good! 🤗

Coincidentially I also took a look at this over the weekend. I didn't even consider using font-weight: bold because I thought that it would cause the sibling nav items to "jump", but your PR looks nice -- much less of an issue than I thought!

FWIW I added some mockups showing some variants (for both (basically interchangable) "selected" and "hover" states):

[arzafran]

Nice Mockups!
I just took the easiest approach but you're right it makes the page 'jump' a little. but since paddings were a little off making any background decoration look misaligned I went with it and just used the font-weight to know if my idea was in the right direction.

[fk]

Nice Mockups!
I just took the easiest approach […]

Thank you! And: Nothing wrong with the easiest approach -- super happy you're working on this!

but since paddings were a little off making any background decoration look misaligned

Oh yeah, I saw that, too. 😁
Feel free to change that if you want to take another look!

[fk]

Just stumbled upon #2516 :-/ 🙄