import React, { useState } from "react";
import { Link } from "react-router-dom";
import "./index.css";

const Navbar = () => {

    const [display, setDisplay] = useState(false);
    const toggle = () => setDisplay(!display);

    return (
        <>
            <header>
                <nav>
                    <div className="nav">
                        <div className="nav-brand">
                            <Link to="./" className="text-black">Website</Link>
                        </div>
                        <div className="toggle-icon" onClick={toggle}>
                            <i id="toggle-button" className={setDisplay ? 'fas fa-times' : 'fas fa-bars'}/>
                        </div>
                        <div className={setDisplay ? "nav-menu visible" : "nav-menu"}>
                            <ul className="main-menu">

                                <li><Link to="./">Home</Link></li>
                                <li><Link to="./blog">Blog</Link></li>
                                <li className="drp">
                                    <p className="dropbtn">Find <i className="fa-solid fa-angle-down"></i></p>
                                    <ul className="dropdown-content">
                                        <li><Link to="./find/portable-keyboards">Portable Keyboards</Link></li>
                                    </ul>
                                </li>
                                <li className="drp">
                                    <p className="dropbtn">More <i className="fa-solid fa-angle-down"></i></p>
                                    <ul className="dropdown-content">
                                        <li><Link to="./piano-notes">Piano Notes</Link></li>
                                        <li><Link to="./chords">Chords</Link></li>
                                        <li><Link to="./tools/metronome">Metronome</Link></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </header>  
        </>
    )
}

export default Navbar;

Here I am trying to open and close the menu by clicking on the Hamburger icon but nothing is happening. It is always open up. I don't know what's the problem. Someone, please resolve it to toggle the menu bar.

CodePudding user response：

you are using setDisplay ? <> : <> as a ternary operator.

use display instead for it to work.