hamburger navbar problems with activation

I have problems with getting this to work... I watch a tutorial (not old) and followed closely. Can anybody see problems with this code or why it shouldn't work? I have started over multiple times, but the same issue. The burger is there but nothing happens when I click it. HTML

<ul class="nav__links">
            <li><a class="hvr-reveal hjem" href="index.php">Home</a></li>
            <li><a class="hvr-reveal status" href="status.html">WEB Status</a></li>
            <li><a class="hvr-reveal weather" href="#">Weather</a></li>
            <li><a class="hvr-reveal adventure" href="info.html">Adventure</a></li>
          </ul>
        <div class="burger">
          <div class="line1"></div>
          <div class="line2"></div>
          <div class="line3"></div>
        </div>
      </nav>

CSS

.burger {
  display: none;
  cursor: pointer;
}

.burger div{
   width: 25px;
   height: 2px;
   background-color: white;
   margin: 5px;
}

@media screen and (max-width:768px){
  body {
    overflow-x: hidden;
  }
  .nav__links {
    position: absolute;
    right: 0px;
    height: 92vh;
    background-color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 8vh;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav__links li{
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

Java Script

const navSlide = () => {
   const burger = document.querySelector('.burger');
   const nav = document.querySelector('.nav__links');

   burger.addEventListener('click',()=> {
    nav.classlist.toggle('nav-active');
  });
}

navSlide();