您需要某种类型的逻辑来确定单击时何时打开和关闭。useState()将是我的首选。

import React, { useState } from 'react';
// ...

const Navbar = () => {
    // 'nav' will store the value, 'setNav' will change the value
    const [nav, setNav] = useState(false);
    // change the value of 'nav'
    const handleNav = () => {
        setNav(!nav)
    };

    return (
    // ...
    <HambergerMenu size="32" color="var(--white-100)" onClick={handleNav} />
    );
    // ...

};

现在，您需要使用一些三元运算符（:、?）来更改将呈现实际菜单的指定组件的className。

return (
    // ...
    <HambergerMenu size="32" color="var(--white-100)" onClick={handleNav} />
    // if nav === true, menuHide class, otherwise menuShow
    <div className={nav ? 'menuHide' : 'menuShow'}>
        <MobileMenu />
    </div>
    // ...

);

但是，当实际菜单打开时，您可能还希望出现一个“X”类型的按钮来代替汉堡菜单按钮，并且，当菜单显示时，您可能还希望隐藏汉堡菜单按钮。
你需要在<HamburgerMenu />中添加一个动态的className来隐藏nav === true，然后添加一个默认隐藏的<CloseMenu />，但是在nav === true时会显示出来，这些都可以使用相同的逻辑来完成。
希望上面的片段能有所帮助。

您应该创建一个状态变量，例如：const [面板打开，设置面板打开] =使用状态（假）;
然后，当您单击汉堡包时，添加一个onclick事件来切换状态，例如onClick={togglePanel}
然后在togglePanel函数中，按如下方式切换状态：设置面板打开（！panel打开）
然后，当panelOpen变量为true时，使用条件呈现来呈现面板，例如{panelOpen &&（... Panel code）}
干杯伙计。