Add active state styles for top navbar items

[arzafran]

Background

The active item in doc's top navbar wasn't being highlighted, hence #7425

How I've fixed it:

• Added activeClassName="active" to navigation.js items
• Added styles for items with the class active

Screenshots:

BEFORE

AFTER

[Manoz]

Good catch @arzafran 👍

[arzafran]

I'm not sure why tests are not passing, and didn't understand how to debug failing ci.
Any help would be appreciated :)

[KyleAMathews]

There are some failing tests on windows (appveyor). Doesn't seem related to this PR so they're probably problems on master that are affecting your PR as well. Sorry about the confusion!

[arzafran]

Thanks for the clarification!

[fk]

Hey @arzafran!
Thank you so much for jumping on this! 🤗

As mentioned in the issue, I was sceptic if font-weight: bold would be a good idea, but this is working quite well and I think we should get this in while discussing if we want to go down a different path in terms of styling.

However, one thing that I think we should take care of is that the active styles currently only are applied if the location.pathname exactly matches the href of the link -- e.g when visiting /docs/gatsby-starters/, "Docs" won't be active -- currently it only is for /docs/. Would be 💯 if you could take a look at this as part of this PR!

I asked @KyleAMathews how to do this and he pointed me to https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#the-following-props-are-no-longer-available-on-link and @reach/router's getProps.

[arzafran]

hey! sure, I'll take a look later today! thanks.

[fk]

Yay! Thank you @arzafran! 🤗

I don't know anything about getProps until now and programming doesn't come easy to me, so I might not be able to help, but others surely can -- so please let us know if you're running into problems!

[shannonbux]

@fk #899 is in ichabod-cranes so don't think people can see it perhaps?

Also I moved this issue and #899 into the [EPIC] Docs IA Redesign cleanup epic here:
#7427

Thanks for working on this, @arzafran!

[fk]

Hey @arzafran, I just stumbled upon #7526 (comment) which shows how to do this.

[fk]

@shannonbux Added a new issue to capture the main navigation expansion: #7544

[fk]

Hey @arzafran, I just merged #7933 by @kkemple which adds the active state for the top navbar items. I hope you don't mind 🙏— thanks for your work on this! 🤗