GatsbyJS Burger Menu close menu on AnchorLink click

Question

I have created a working burger menu in my Gatsby application using react-burger-menu. I am trying to get it so that when an AnchorLink in the burger is clicked, the Burger menu closes. I have tried doing <Menu isOpen={ false }> as suggested in the docs but not working. Any help?

This is my Burger menu code:

import React from "react"
import { slide as Menu } from "react-burger-menu"
import { AnchorLink } from "gatsby-plugin-anchor-links"

const Burger = () => {
  return (
    <div className="burger-menu">
      <Menu right isOpen={ false }>
        <AnchorLink to="/#about">About Me</AnchorLink>

        <AnchorLink to="/#experience">Experience</AnchorLink>

        <AnchorLink to="/#projects">Projects</AnchorLink>

        <AnchorLink to="/#contact">Contact</AnchorLink>

      </Menu>
    </div>
  )
}

export default Burger

Answer 1

You can provide event handlers for Menu and AnchorLink and add a state menuOpen to close/open sidebar.

const Burger = () => {
  const [menuOpen, setMenuOpen] = React.useState(false)

  // This keeps your state in sync with the opening/closing of the menu
  // via the default means, e.g. clicking the X, pressing the ESC key etc.
  const handleStateChange = state => {
    setMenuOpen(state.isOpen)
  }

  // This can be used to close the menu, e.g. when a user clicks a menu item
  const closeMenu = () => {
    setMenuOpen(false)
  }

  return (
    <div className="burger-menu">
      <Menu
        right
        isOpen={menuOpen}
        onStateChange={state => handleStateChange(state)}
      >
        <AnchorLink
          to="/#about"
          onClick={() => {
            closeMenu()
          }}
        >
          About Me
        </AnchorLink>

        <AnchorLink
          to="/#experience"
          onClick={() => {
            closeMenu()
          }}
        >
          Experience
        </AnchorLink>

        <AnchorLink
          to="/#projects"
          onClick={() => {
            closeMenu()
          }}
        >
          Projects
        </AnchorLink>

        <AnchorLink
          to="/#contact"
          onClick={() => {
            closeMenu()
          }}
        >
          Contact
        </AnchorLink>
      </Menu>
    </div>
  )
}