I am trying to create a side nav with HTML, CSS, and Javascript. I was able to create the function in order to open and close the navigation. The issue I am running into which I did not notice until I added the background image is that the links still pop out even though the navigation is closed. I tried display: none; on both the li and links. The results are that no links appear and if I try visibility only the Home link appears. here is my code

<nav>
            <p class="brand">DreamJob</p>
        
        <div class="burger">
            <div class="line"></div>
        </div>
        <ul class="ul-one">
            <li class="li-one"><a href="#" class="links-one">Home</a></li>
            <li class="li-one"><a href="#" class="links-one">About</a></li>
            <li class="li-one"><a href="#" class="links-one">Contact</a></li>
            <li class="li-one"><a href="#" class="links-one">Feedback</a></li>
            <li class="li-one"><a href="#" class="links-one">Sign up</a></li>
            <li class="li-one"><a href="#" class="links-one">Sign in</a></li>
        </ul>
    </nav>

nav .ul-one {
  position: absolute;
  right: 0;
  top: 90px;
  background-color: #111;
  width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s ease-in-out;
}

nav .ul-one .li-one {
  margin: 10px 0px 10px 0px;
  z-index: 200;
}

nav .ul-one .li-one .links-one {
  color: #fff;
  font-size: 16px;
  font-family: karma;
  text-decoration: none;
  display: none;
}

function nav () {
    let burger = document.querySelector(".burger");
    let ul = document.querySelector("ul-one");
    let links = document.querySelector(".links-one");
    let openNav = false;
    burger.addEventListener("click", ()  =>  {
if (!openNav) {
   document.querySelector(".ul-one").style.width = "40%";
   document.querySelector(".links-one").style.display ="block";
   openNav = true;
}else {
    document.querySelector(".ul-one").style.width = "0";
    document.querySelector(".links-one").style.display ="none";
    openNav = false;
}
    });
}
nav();