0
60
VistasGatsby Link not working with isPartially Active on MDX rendered pages
I have been building out a static site with gatsby and a few sections I have rendered out pages written as MDX and parsed through their own layouts. This is all via the gatsby-plugin-mdx file and it works great.
However, I'm trying to get the top-level navigation to highlight as active when a user navigates to a sub-page in that section. I am using the code from the Gatsby docs and it works on the pages I created as normal JS files.
Example:
<Link partiallyActive={true} activeClassName="header-nav-active" to={menu.url} title={menu.title}>
{menu.label}
</Link>
It seems that it doesn't seem to work for the MDX pages, even though what is rendered in location.pathname is the same. My current structure is:
src
-pages
--section
----section-subpage.js
--other section
----other-section-sub
-----index.mdx
----other-section-sub-2
-----index.mdx
Ultimately if you look at this layout I would like "Figma" to be highlighted as active when you are navigating though the sub pages in that section.
1 Respuestas
Responde la pregunta0
Have you tried using getProps helper function? Because Gatsby's router extends from React's (@reach/router) you can take advantage of the advanced props to customize your style
You can create a partiallyActive link like:
const isPartiallyActive = ({ isPartiallyCurrent }) => {
return isPartiallyCurrent
? { className: 'navlink-active navlink' }
: { className: 'navlink' }
}
const PartialNavLink = props => (
<Link getProps={isPartiallyActive} {...props}>
{props.children}
</Link>
)
And then simply use:
<PartialNavLink to="/figma">Figma</PartialNavLink>
Or in an unrefined way:
<Link getProps={({ isPartiallyCurrent }) => isPartiallyCurrent ? { className: "active" } : null } to={"/figma"}>
Figma
</Link>