I have a Navbar component in my React app which shows a Sidebar component when screen is small. I used Material UI for the Drawer for displaying the sidebar. My issue is, on clicking the hamburger icon, drawer opens fine. But it doesn't close when clicking the links or even outside the Sidebar.

How to solve this? What am I doing wrong? I'm using Here is my code.

Navbar.js

import React, { useContext, useEffect, useState } from "react";
import "./navbar.css";
import Sidebar from "./Sidebar";
import { NavLink } from "react-router-dom";
import { Drawer } from "@mui/material";
import IconButton from "@mui/material/IconButton";

import MenuIcon from "@mui/icons-material/Menu";

const Navbar = () => {
  const [drwOpen, setDrwOpen] = useState(false);

    const handleOpen = () => {
    setDrwOpen(true);
  };
  const handleClose = () => {
    setDrwOpen(false);
  };


 return (
    <header>
      <nav>
            <div className="left">
            <div className="hamburger" onClick={handleOpen}>
                <IconButton>
                <MenuIcon style={{ color: "#fff" }} fontSize="large" />
                </IconButton>
                <Drawer open={drwOpen} onClose={handleClose}>
                <Sidebar logClose={handleClose}/>
                </Drawer>
            </div>

            <NavLink to="/">
                <img
                className="navlogo"
                src={process.env.PUBLIC_URL   "/math.png"}
                alt="logo"
                />
            </NavLink>
            </div>
        </nav>
      </div>
    </header>
  );
};

export default Navbar;

Sidebar.js

import React from "react";
import { NavLink } from "react-router-dom";
import { useContext, useState } from "react";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import "./sidebar.css";

const Sidebar = ({logClose}) => {

  return (
    <>
      <div className="sidebar">
        <p>random text</p>
        <div className="menu" onClick={()=>logClose()}>
          <NavLink to="/" style={{ textDecoration: "none" }} className="lis" >
            <p>ABC</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>

          <NavLink to="/" style={{ textDecoration: "none" }} className="lis">
            <pXYZ</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>

          <NavLink to="/" style={{ textDecoration: "none" }} className="lis">
            <p>123</p>
            <ChevronRightIcon style={{ fill: "#949494" }}/>
          </NavLink>
        </div>
      </div>
    </>
  );
};

export default Sidebar;

My package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.4.0",
    "react-dom": "^17.0.2",
    "react-material-ui-carousel": "^2.3.5",
    "react-multi-carousel": "^2.6.5",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux": "^4.1.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

CodePudding user response：

The onClick event in <div className="hamburger"> is probably interfering with the open state of your drawer.

Since the drawer is a child of that div, every click on the drawer will propagate and call the onClick event of its parent element as well.

Try putting <Drawer> outside of <div className="hamburger">

Or use event.stopPropagation() in an onClick in the drawer component to stop that behaviour like so:

<Drawer onClick={(event) => {event.stopPropagation()}}>

Hope this could help!