汉堡菜单无法打开

Question

您好，当我调整浏览器大小时，我的汉堡菜单无法打开。我尝试了许多不同的想法，但没有任何效果。调整窗口大小后，还有一秒钟很奇怪的一秒钟

错误：未被捕获的TypeError：无法读取HTMLDivElement.burger.addEventListener上未定义的属性“ toggle”

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

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

navSlide();

nav {
     display: flex;
     justify-content: space-around;
     align-items: center;
     min-height: 8vh;
     background-color: red;
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
}
 .logo {
     color: white;
     letter-spacing: 6px;
     text-transform: uppercase;
     font-size: 20px;
}
 .navul {
     display: flex;
     width: 45%;
     color: white;
     list-style: none;
     justify-content: space-around;
}
 .navul a {
     text-decoration: none;
     color: white;
     letter-spacing: 2px;
     font-size: 14px;
}
 .burger {
     display: none;
     cursor: pointer;
}
 .burger div {
     width: 25px;
     height: 3px;
     color: white;
     margin: 5px;
     background-color: white;
}
 @media screen and (max-width:768px){
     body{
         overflow-x: hidden;
    }
     .navul {
         position: absolute;
         right: 0px;
         height: 92vh;
         top: 8vh;
         background-color: red;
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 50%;
         transform: translateX(100%);
         transition: transform 0.5s ease-in;
    }
     .navul li {
         opacity: 0;
    }
     .burger {
         display: block;
    }
}
 .nav-active {
     transform: translateX(0%);
}

<section id="01">
            <nav class="navigation">

                <div class="logo">
                    <h4>Spieker Manufaktur</h4>
                </div>

                <ul class="navul">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Über Uns</a></li>
                    <li><a href="#">Produkte</a></li>
                    <li><a href="#">Herstellung</a></li>
                </ul>
                <div class="burger">
                    <div class="line01"></div>
                    <div class="line02"></div>
                    <div class="line03"></div>
                </div>
            </nav>
        </section>