Using NavLink and Accordion, cannot see current active link

[escapemanuele]

I don't know if it's a bug or I'm missing something. Navigation is working well in my Gatsby site, using AccordionNav and NavLink as in the example.

My code:

    <Navigation
            open={!fullwidth && menuOpen}
            role="navigation"
            pathname={props.location.pathname}
            components={{
              wrapper: AccordionNav,
              a: NavLink,
            }}
     />

Thanks a lot for your work

The only thing missing is that the link, after being clicked, is not seen as "active", therefore style isn't applied

My package.json has:
"gatsby": "^2.29.2",
"react": "^17.0.1",
"react-dom": "^17.0.1"
"theme-ui": "^0.3.5"

Should it work by default? Or this isn't something currently working?

I can see that NavLink has this style:

'&:hover, &:focus, &.active': {
        color: 'primary',
      },

[lachlanjc]

Hey! While I've never used these components in exactly that way, my guess is you'll need to wrap NavLink with Link so you can custom-apply your active styling to it. We don't integrate with Gatsby/Next/etc links out of the box since this is just a styling library. Try making your own GatsbyNavLink component that checks if the link is active with Gatsby, then renders a child NavLink.

[escapemanuele]

Ok thanks!
For now I managed to get it to work using this, if anyone encounters the same problem:

import { Link } from "gatsby"
import { NavLink } from "theme-ui"

const GatbsyNavLink = (props) => (
    <NavLink as={AsLink} activeClassName="active" to={props.href}>
        {props.children}
    </NavLink>
)

function AsLink(props) {
    return <Link activeClassName="active" {...props} />;
}

export default GatbsyNavLink

Still have to refactor it better, but that's working for me