I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLinks}" and leave it as "NavLinks", the navigation links appear but the hamburger menu remains non-functional. How can I resolve this problem? Click here for a screenshot of the mobile navigation
import React, {useState} from 'react';
import NavLinks from './NavLinks';
import './nav.css';
import {BiMenuAltRight} from 'react-icons/bi';
import {IoMdClose} from 'react-icons/io';
function MobileNavigation() {
const [open, setOpen] = useState(false);
const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>;
const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>
return (
<nav className="MobileNavigation">
{open ? closeIcon : hamburgerIcon}
{open && <NavLinks />}
</nav>
);
}
export default MobileNavigation;.nav-bar {
height: 60px;
width: 100%;
top: 0;
position: sticky;
background-color: black;
z-index: 1000;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.nav-logo {
display: flex;
}
.nav-logo h1 {
font-size: 23px;
display: flex;
align-items: center;
padding-left: 20px;
font-family: "Earth-Obiter";
background: linear-gradient(
to right,
#13c2e9,
#3ab6ec,
#5ca8e8,
#799adf,
#908bd0,
#a480c7,
#b873b9,
#c866a6,
#de5890,
#ee4c73,
#f4484f,
#f05123
);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.nav-logo img {
object-fit: contain;
width: auto;
height: 50px;
padding-left: 30px;
}
.nav-items {
list-style-type: none;
display: flex;
flex-direction: row;
}
.nav-items li {
padding: 0 30px;
}
.nav-items li a {
align-items: center;
color: white;
}
.li-quote a {
background-color: rgb(0, 209, 157);
border-radius: 20px;
padding: 7px 15px;
}
.li-quote a:hover {
background-color: #f05123;
transition: ease-in-out 0.5s;
}
.nav-li a:hover {
background-color: white;
color: black;
padding: 7px 14px;
border-radius: 20px;
transition: ease-in 0.3s;
}
.MobileNavigation {
display: none;
}
/* Media Queries */
@media only screen and (max-width: 768px) {
.Navigation {
display: none;
}
.MobileNavigation {
display: grid;
flex-direction: column;
background: rgb(0, 30, 60);
align-items: center;
}
.Hamburger {
position: absolute;
right: 5%;
cursor: pointer;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>