With partiallyActive set to true, homepage menu button is also highlighted

[bsraya]

I found out that on Gatsbyjs v2, the partiallyCurrent feature has been enabled and I have been trying to add that on my website. However, when it's added, there are always two menu buttons are highlighted at the same time.

Is there a way to prevent home page menu button being highlighted while we're on different page?

Here is my header.js file:

import { Link } from "gatsby"
import React from "react"
import { rhythm } from '../utils/typography';

const Header = ({ menuLinks }) => (
    <header itemScope itemType="http://schema.org/Menu">
        <div>
            <nav>
                <ul style = {{ 
                    display: `flex`, 
                    flex: `1`, 
                    margin: `0`, 
                    padding: `0` 
                    }}
                >
                    {menuLinks.map(link => (
                        <li 
                            key={link.name} 
                            style = {{ 
                                marginRight: rhythm(0.4), 
                                listStyleType: `none`, 
                            }}
                        >
                            <Link 
                                to = { link.link } 
                                itemProp="url"
                                getProps={({isPartiallyCurrent}) => ({
                                    style: { color : isPartiallyCurrent ? `#fff1d0` : `grey`},
                                })}
                                className="link"
                            >
                                {link.name}
                            </Link>
                        </li>
                    ))}
                </ul>
            </nav>
        </div>
    </header>
)

export default Header

[joperron]

/ should use isCurrent not isPartiallyCurrent since every page is under / it will always be true

[bsraya]

It works now, thanks alot

{
    link.name === 'Home' ?
    <Link 
        to = { link.link } 
        itemProp="url"
        getProps={({isCurrent}) => ({
            style: { color : isCurrent ? `#fff1d0` : `grey`},
        })}
        className="link"
    >
        {link.name}
    </Link>
    :
    <Link 
        to = { link.link } 
        itemProp="url"
        getProps={({isPartiallyCurrent}) => ({
            style: { color : isPartiallyCurrent ? `#fff1d0` : `grey`},
        })}
        className="link"
    >
        {link.name}
    </Link>
}