Could you assist me with figuring out where and what to add in order to close the navbar when navigating to other pages?
Currently, it only closes when I click on the close button itself.
Below is the code for the navbar:
import { useRef } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import "../Styles/main.css";
import { NavLink } from "react-router-dom";
import FacebookIcon from '@mui/icons-material/Facebook';
import InstagramIcon from '@mui/icons-material/Instagram';
import logo from "./img/logojobb.png";
function Navbar() {
const navRef = useRef();
const showNavbar = () => {
navRef.current.classList.toggle("responsive_nav");
};
return (
<header>
<img src={logo} alt="logo" style={{
height: 'inherit',
}}/>
<nav ref={navRef}>
<NavLink to="/">Home</NavLink>
<NavLink to="/courses">Courses</NavLink>
<NavLink to="/blog">Blog</NavLink>
<NavLink to="/rental">Rental</NavLink>
<NavLink to="/events">Events</NavLink>
<NavLink to="/contact">Contact</NavLink>
<a className="footersocial" href="https://www.facebook.com/example" target="_blank" rel="noreferrer"><FacebookIcon></FacebookIcon></a>
<a className="footersocial" href="https://www.instagram.com/example" target="_blank" rel="noreferrer"><InstagramIcon></InstagramIcon></a>
<button
className="nav-btn nav-close-btn"
onClick={showNavbar}>
<FaTimes />
</button>
</nav>
<button className="nav-btn" onClick={showNavbar}>
<FaBars />
</button>
</header>
);
}
export default Navbar;