0

我将 Gatsby 与 CSS 框架 Bulma 一起使用，为了让移动导航栏工作，您必须为一个按钮添加一个事件侦听器，该按钮仅在屏幕尺寸为特定尺寸时才可用。在以前的 Gatsby 版本中，它运行良好，只是在最近一周我遇到了问题。现在我收到一个无效的钩子调用

import { Link } from 'gatsby'

let Header = () => {
    useEffect(() => {
        let burger = document.getElementById(`burger`);
        let menu = document.getElementById(`navMenu`)
        burger.addEventListener(`click`, function () {
            burger.classList.toggle(`is-active`);
            menu.classList.toggle(`is-active`)
        })
    });

    return (
        <>
            <nav className="navbar is-fixed-top" id="navbar">
                <div className="navbar-brand">
                    <Link to="/">
                        <p className="navbar-item">CMJR DEVELOPMENT</p>
                    </Link>

                    <a role="button" id="burger" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                        <span aria-hidden="true"></span>
                    </a>
                </div>
                <div className="navbar-menu" id="navMenu">
                    <div className="navbar-end">
                        <Link to={"/service"} className="navbar-item ">Services</Link>
                        <Link to={"/portfolio"} className="navbar-item ">Portfolio</Link>
                        <Link to={"/contact"} className="navbar-item ">Contact</Link>
                    </div>
                </div>
            </nav>
        </>
    )
}

export default Header;

I know I'm doing something wrong, just not what.
4

0 回答 0