我有一个汉堡包侧边栏，现在与onClick工作得很好，我想改变我的代码，所以：

• 侧边栏打开悬停在汉堡按钮
• 当光标在侧边栏上时保持打开状态
• 当光标离开侧边栏时关闭
• 点击关闭侧边栏按钮时关闭- * 当前功能 *
• 选择其中一个选项卡时关闭- * 当前功能 *
  我尝试了几个不起作用的东西，我想问应该如何更改我的代码，以便上面指定的功能将适用。
  这是导航条形码：

import React, { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { NavbarData } from "./NavbarData";
import { IconContext } from "react-icons";
import "./Navbar.css";
import Hamburger from "./Icons/Hamburger.svg";
import closeIcon from "./Icons/Close.svg";
import "./Icons/p_logo_color.png";
import Persona from "./Icons/Persona.svg";

function Navbar() {
  const [sidebar, setSidebar] = useState(false);
  const showSidebar = () => setSidebar(!sidebar);
  const [pageName, setPageName] = useState('Operational Overview');
  const location = useLocation();

  

  const getPageTitleByUrl = (path) => {
    NavbarData.filter((navItem) => {
    
      if(navItem.path === path) {
        setPageName(navItem.title);
      }
      
    } )

  };

  const userConfigPageTitle = (path) => {
    setPageName("User Configuration");

  }

  

  useEffect(() => {
    if(location.pathname) {
      getPageTitleByUrl(location.pathname);
    }
  }, [location] ); 
  

  return (
    <>
      <IconContext.Provider value={{ color: "undefined" }}>
        <div className="navbar">
          <Link to="#" className="menu-bars">
             <img src={Hamburger} alt="hamburger" onHover={showSidebar} />
          </Link>
          <div className="pageTitle"><h1>{pageName}</h1></div>
          <Link to='userconfig' onClick={userConfigPageTitle}>
          <div><img className="userIcon" src={Persona} alt="persona" /> </div>
          <div className="userButton">User123#</div>
          </Link>
          <Link to='/' className="logout-button">Logout</Link>
        </div>
        <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
          <ul className="nav-menu-items" onClick={showSidebar}>
            <li className="navbar-toggle">
              <Link to="#" className="menu-bars">
              <img src={closeIcon} alt=''/>
              </Link>
            </li>
            {NavbarData.map((item, index) => {
              return (
                <li key={index} className={item.cName}>
                  <Link to={item.path}>
        
                    <span className="navbutton-text" ><span className="navbutton-icon">{item.icon}</span>{item.title}</span>
                    
                    
                  </Link>
                  
                </li>
                
              );
            })}
          </ul>
        </nav>
      </IconContext.Provider>
    </>
  );
}

export default Navbar;

这是我目前的CSS：

.navbar {
    background-color: #285C7E;
    height: 86px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.menu-bars {
    margin-left: 1rem;
    font-size: 2rem;
    background: none;
    color: #f5f5f5;
}

.nav-menu{
    background-color: #071F2A;
    width: 350px;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: -100%;
    transition: 850ms;
    z-index: 99;
}

.nav-menu.active {
    left: 0;
    transition: 350ms;    
    z-index: 99;
}

.nav-text{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 8px 0px 8px 0px;
    list-style: none;
    height: 60px;
    ;
}

.nav-text a{
    text-decoration: none;
    color: #f5f5f5;
    font-size: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 2px;
    border-radius: 0px;
}

.nav-text a:hover {
    background-color: #285C7E;
}

.nav-menu-items{
    width: 100%;
    height: 100vh;
    
    
}

.navbar-toggle{
    background-color: #071F2A;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
    
}

.navbutton-icon{
    padding-left: 0px;
    padding-right: 10px;
    
    
    
    

}


.navbutton-text {
    margin-left: 5px;
    align-items: center;
    right: 20px;
    
    
}

.pageTitle {
margin-left: 30px;
color: #F5F5F5;
}

.userIcon{
    position: absolute;
    right: 220px;
    top: 28px;
    margin-inline-end: 20px;
    margin-top: 10px;
    margin-right: 5px;
    
}

.userButton{
    position: absolute;
    right: 140px;
    top: 38px;
    color: #F5F5F5;
    font-size: 18px;
}


.logout-button{
    text-decoration: none;
    position: absolute;
    right: 42px;
    top: 27px;
    margin-left: 60px;
    color: #F5F5F5;
    margin-top: 10px;
    font-size: 18px;
}

.logout-button:hover{
   
    color: #d5e8fa;
   
    font-size: 18px;
    

}

.userButton:hover{
    
 
    color: #d5e8fa;
    font-size: 18px;
    }

    .nav-text{
        height: 76px;
        text-align: center;
    }

非常感谢！