MUI Drawer opening but not closing in React web app

July 14, 2022

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"
    ]
  }
}