Can't manage to correctly configure the hamburger and close symbols-CodePudding

With right: 0;, The menu is appearing on the right side. When I want to close it, I'm changing to right: -200px; so that I get the mobile page without the menu coming to the right. I want the fa-bars symbol to appear when the menu is not opened (right: -200px;), and the fa-xmark element when the menu is appearing (right: 0px;). I've tried many variations of the code and I still couldn't manage to do it.

@media (max-width: 700px) {
  .nav_links ul li {
    display: block;
  }
  nav .fa-bars {
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
    position: absolute;
  }
  .nav_links {
    position: absolute;
    background: lightpink;
    height: 100vh;
    width: 200px;
    top: 0;
    right: 0px;
    text-align: left;
    z-index: 2;
  }
  nav .fa-xmark {
    display: block;
    color: black;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
}

<nav >
  <i ></i>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <a  href="#"><button>My Instagram</button></a>

  </ul>
  <i ></i>
</nav>

CodePudding user response：

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <style>
      @media (max-width: 700px) {
          
        body {
            overflow-x: hidden;
        }
        
        .nav-container {
          height: 300px;
          position: absolute;
          right: 0;
          top: 0;
        }

        .nav-container i {
          float: right;
          margin: 10px;
          cursor: pointer;
        }

        .nav-links {
          position: absolute;
          list-style: none;
          top: 30px;
          right: 0;
          width: 100px;
          padding: 20px ;
          background: pink;
          transition: 0.3s linear;
        }

        .nav-links.active {
          right: -140px;
        }

        .nav-links li {
          margin: 20px;
        }

        .nav-links li a {
          color: black;
          text-decoration: none;
        }
      }
    </style>
  </head>

  <body>
    <nav >
      <i onclick="hanldeMenuClick()" ></i>

      <ul >
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Page</a></li>
        <a  href="#"><button>My Instagram</button></a>
      </ul>
    </nav>

    <script>
      const btn = document.querySelector(".fas");
      const navLinks = document.querySelector(".nav-links");

      function hanldeMenuClick() {
        navLinks.classList.toggle("active");
      }
    </script>
  </body>
</html>