Trigger the Menu to close

[nath-green]

Hello, great work on this library!

I've implemented the Menu component in a NextJS project - all working fine. I'm wondering if there is ability to close the menu without a click, say when you change a route?

If the close action can be exposed then this could be called on route change.

Thanks!

[RobinMalfait]

Hey! Thank you for your feature suggestion!
Much appreciated! 🙏

I'm trying to understand why this isn't working already? If you click a link to change a route, then it should already close because it is considered an "outside click". Are you doing programatic redirects without any user interaction at all?

[nath-green]

I'm clicking a link inside the menu using NextJS <Link> component which just renders as an <a>, the route changes but the menu stays open. It could be a NextJS thing? Unsure if you have tried this library with that before?

If I change route from outside the menu (another part of the header nav) then the menu closes correctly

[RobinMalfait]

Sorry for the late answer!

I think that the Link component of Next is not forwarding all the props. Can you try to use something like this:

function NextLink(props) {
  const { href, children, ...rest } = props;
  return (
    <Link href={href}><a {...rest}>{children}</a></Link>
  )
}

You can then use it as:

<Menu.Item as={NextLink}>...</Menu.Item>

[nath-green]

That has worked! Thank you very much for your help

[RobinMalfait]

Perfect!

[mathiasrscom]

Sorry for the late answer!

I think that the Link component of Next is not forwarding all the props. Can you try to use something like this:

function NextLink(props) {
  const { href, children, ...rest } = props;
  return (
    <Link href={href}><a {...rest}>{children}</a></Link>
  )
}

You can then use it as:

<Menu.Item as={NextLink}>...</Menu.Item>

I was trying using it like described, but it wouldn't let me. Can you elaborate on what to insert in the <Menu.Item as={NextLink}>...</Menu.Item> to get it to work?

[RobinMalfait]

@mathiassdev I think that it would be easier if you open a new issue with a minimal reproduction repository, the current behaviour (and/or errors) and the expected behaviour.