skip to Main Content

I want to create a hamburger menu for a website for small screens, I use useState to set a variable to false by default then making an onClick function for a button which changes the useState variable and toggling the div with the menu items hidden and visible. The problem is although I have made the variable false when the page is reloaded the menu appears is there something I could do to fix that or should I go about this in another way.

Here is my code

export default function NavBar() {

    const [toggleMenu, setToggleMenu] = useState(false);
    const viewMenu = () => {
        setToggleMenu(!toggleMenu)
    }

  return (
    <>
        <div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
            <div>
                <button onClick={viewMenu} className="text-xl btn">
                    <BiMenuAltLeft />
                </button>
            </div>
            <div>
                <button className="text-2xl btn btn-ghost">MEDFITS</button>
            </div>
            <div>
                <button className="p-2 text-xl btn"><VscAccount /></button>
                <button className="p-2 text-xl btn"><BiSearchAlt /></button>
            </div>
        </div>
        <div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu && "hidden" }`}>
            <ul className="p-4 text-center">
                <li><a className="btn btn-wide" href="/">HOME</a></li>
                <li><a className="btn btn-wide" href="/about">ABOUT</a></li>
                <li><a className="btn btn-wide" href="/shop">SHOP</a></li>
                <li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
            </ul>
        </div>
    </>

I tried looking in the console for clues as to what is the problem but I didn’t find anything.

2

Answers


  1. Chosen as BEST ANSWER

    To Fix this problem I just changed the default value of the toggleMenu to true


  2. I think your code is correct but I think you should apply the toggle logic to the <ul> container as well. I also prefer to use ternary operators while giving conditional classnames to the components.
    Here’s my implementation:

    export default function NavBar() {
        const [toggleMenu, setToggleMenu] = useState(false);
    
        const viewMenu = () => {
            setToggleMenu(!toggleMenu);
        };
    
        return (
            <>
                <div className="flex justify-around w-[90%] my-3 mx-auto rounded-md navbar bg-base-200">
                    <div>
                        <button onClick={viewMenu} className="text-xl btn">
                            <BiMenuAltLeft />
                        </button>
                    </div>
                    <div>
                        <button className="text-2xl btn btn-ghost">MEDFITS</button>
                    </div>
                    <div>
                        <button className="p-2 text-xl btn"><VscAccount /></button>
                        <button className="p-2 text-xl btn"><BiSearchAlt /></button>
                    </div>
                </div>
                <div className={`w-fit bg-base-200 mx-10 rounded-md ${toggleMenu ? '' : 'hidden'}`}>
                    <ul className={`p-4 text-center ${toggleMenu ? '' : 'hidden'}`}>
                        <li><a className="btn btn-wide" href="/">HOME</a></li>
                        <li><a className="btn btn-wide" href="/about">ABOUT</a></li>
                        <li><a className="btn btn-wide" href="/shop">SHOP</a></li>
                        <li><a className="btn btn-wide" href="/contact">CONTACT</a></li>
                    </ul>
                </div>
            </>
        );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search