我目前正在为移动的设备创建菜单边栏，当我隐藏菜单时，它最终会从屏幕上消失，但在向右滑动时仍然可见。screenshot of problem
此外，请随意指出我代码中的任何问题，因为我对Web开发还是相当新手！

<nav>
        <a href="index.html"> LOGO</a>
        <div class="nav-links" id="navLinks">
          <i class="fa-solid fa-xmark icon" onclick="hideMenu()"></i>
          <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">GALLERY</a></li>
            <li><a href="">ABOUT</a></li>
            <li><a href="">CONTACT</a></li>

          </ul>
        </div>
        <i class="fa-solid fa-bars icon" onclick="showMenu()"></i>
      </nav>

@media(max-width: 700px){
  .text-box h1{
    font-size:30px;
  }
  .nav-links ul li{
    display: block;
    font-size: 30px;
  }
  .nav-links{
    position: absolute;
    background:#337195;
    height:100vh;
    width:250px;
    top:0;
    right:-300px;
    text-align:left;
    z-index: 2;
    transition: 1s;
  }
  .icon { 
    display: block;
    color:white;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  .nav-links ul{
    padding: 30px;
  }
  .nav-links ul li::after{
    width: 100%;
    background:white; 
  }

}

菜单显示/隐藏动画的JavaScript

<script>
  var navLinks = document.getElementById("navLinks")

  function showMenu(){
    navLinks.style.right = "0"
  }
  function hideMenu(){
    navLinks.style.right = "-300px"
  }
</script>