Changing a class css style with javascript

Question

My problem is that I'm trying to change my "nav-links" style in js because I had it displayed as none on my CSS so I was trying to display it as "block" on my js when I click the class "burger" and having my style back again but when I click the class "burger" the "nav-links" appear so that means that the nav2.style.display = "block"; is working but the rest of the .style isn't working and I don't understand why. If anyone could help me I would really appreciate it.

What im trying to change:

I'm using the function showhide() so I can use a onclick on the <div class="burger" **onclick= "showhide()"**>

var clicked = 0;
var nav2 = document.querySelector('.nav-links');

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click', () => {

    //Toggle Nav

    nav.classList.toggle('nav-active');

    //Animate Links

    navLinks.forEach((link, index) => {

      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
      }

    });

    //Burger Animation
    burger.classList.toggle('toggle');

  });
}

if (window.matchMedia("(max-width: 858px)")) {

  function showhide() {
    clicked++;
    console.log(clicked)

    if (clicked == 1) {
      nav2.style.position = "absolute";
      nav2.style.right = "0px";
      nav2.style.height = "92vh";
      nav2.style.top = "8vh";
      nav2.style.backgroundColor = "#000000";
      nav2.style.display = "flex";
      nav2.style.flexDirection = "column";
      nav2.style.transition = "transform 0.5s ease-in";
      nav2.style.display = "block";
    };

    if (clicked == 2) {
      nav2.style.display = "none";
      clicked = 0;
    }
  };
}

navSlide()

.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
  display: none;
}

<nav>
  <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo">

  <ul class="nav-links">
    <li><a href="carrosview.html">Carros</a></li>
    <li><a href="">Motas</a></li>
    <li><a href="">Barcos</a></li>
    <li><a href="registarentrar.html">Entrar / Registar</a></li>
  </ul>

  <div class="burger" onclick="showhide()">
    <div class="line1">---</div>
    <div class="line2">---</div>
    <div class="line3">---</div>
  </div>
</nav>