Closing sidebar when clicking on link

Question

I am using react-burger-menu for my project and i have a issue to close the sidebar when clicking on the links in menu-wrapper. I am pretty new in react so i want to learn the logic behind it , i have succeded to send a prop but dont know how to use it to close the menu when clicking on links that appear.

Appreciate to any help!

Here is the code : App.js

import React from "react";
import "./App.css";
import Home from "./Views/Home";
import Navbar from "./Components/Navbar";
import "bootstrap/dist/css/bootstrap.min.css";
import Footer from "./Components/Footer";
import BurgerMenu from "./Components/BurgerMenu";

function App() {
  React.useEffect(() => {
    const menuWrap = document.querySelector(".bm-menu-wrap");
    if (menuWrap) {
      menuWrap.setAttribute("aria-hidden", true);
    }
  }, []);
  return (
    // BrowserRouter is for navigating between the pages without making the browser Reload
    <div className="App">
      <BurgerMenu />
      <Navbar />
      <Home />
      <Footer />
    </div>
  );
}

export default App;

BurgerMenu

import React from "react";
import { slide as Menu } from "react-burger-menu";
import "./BurgerMenu.css";

const toggleMenu = ({ isOpen }) => {
  const menuWrap = document.querySelector(".bm-menu-wrap");
  isOpen
    ? menuWrap.setAttribute("aria-hidden", false)
    : menuWrap.setAttribute("aria-hidden", true);
};

const BurgerMenu = () => {
  return (
    <div id="h">
      <Menu width={"100%"} noOverlay onStateChange={toggleMenu}>
        <a className="menu-item topicParagraph-font" href="#hej">
          ABOUT US
        </a>
        <a className="menu-item topicParagraph-font" href="#hejd">
          PROJECTS
        </a>
        <a className="menu-item topicParagraph-font" href="/contact">
          CONTACT US
        </a>
      </Menu>
    </div>
  );
};

export default BurgerMenu;

Thanks

Closing sidebar when clicking on link

0 Answers0