**I have tried everything possible to make the clicking fire but I seem not to get it. I just want to be able to open and close the navbar using the hamburger and close icons** I know it is possibly a syntax error but I can't find it. please help
import './style.scss'; import { Link, NavLink } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faBars, faClose, faEnvelope, faHome, faSuitcase, faUser, } from '@fortawesome/free-solid-svg-icons'; import { faGithub, faLinkedinIn, faTwitter, } from '@fortawesome/free-brands-svg-icons'; import { useState } from 'react'; const Sidebar = () => { const [displayNav, setDisplayNav] = useState(false); return ( <> <div className="nav-bar"> <Link className="Logos" to="/"> <h1 className="logo" alt="logo"> T </h1> <h3 className="logoTitle" alt="Tiamz"> Tiamz </h3> </Link> <nav className={displayNav ? 'mobileView' : ' '}> <NavLink exact="true" onClick={() => setDisplayNav(false)} activeclassname="active" to="/" > <FontAwesomeIcon icon={faHome} color="#fff" /> </NavLink> <NavLink onClick={() => setDisplayNav(false)} exact="true" activeclassname="active" className="portfolio-link" to="/portfolio" > <FontAwesomeIcon icon={faSuitcase} color="#fff" /> </NavLink> <NavLink onClick={() => setDisplayNav(false)} exact="true" activeclassname="active" className="about-link" to="/about" > <FontAwesomeIcon icon={faUser} color="#fff" /> </NavLink> <NavLink onClick={() => setDisplayNav(false)} exact="true" activeclassname="active" className="contact-link" to="/contact" > <FontAwesomeIcon icon={faEnvelope} color="#fff" /> </NavLink> <FontAwesomeIcon onClick={() => setDisplayNav(false)} icon={faClose} className="closeNav" size="4x" /> </nav> <ul> <li> <a target="-blank" rel="noreferrer" href="https://www.linkedin.com/in/tiamz-is/" > <FontAwesomeIcon icon={faLinkedinIn} color="#fff" /> </a> </li> <li> <a target="-blank" rel="noreferrer" href="https://mobile.twitter.com/Tiamz_IS" > <FontAwesomeIcon icon={faTwitter} color="#fff" /> </a> </li> <li> <a target="-blank" rel="noreferrer" href="https://github.com/Tiamz01" > <FontAwesomeIcon icon={faGithub} color="#fff" /> </a> </li> </ul> <FontAwesomeIcon onClick={() => setDisplayNav(true)} icon={faBars} className="hamburger-icon " size="4x" /> </div> </> ); }; export default Sidebar;
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)