title: Why is my sidebar not appearing when i click on burger div
body: <p>I have build a navigation list in my header class, also inside js file there is a function to toogle another class that will make nav appear and dissapear on click when in mobile view &lt;768px. Cant understand why id does not toogle on click as it is now, cant make it work, please help.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const navSlide = () =&gt; {
      const burger = document.querySelector(".burger");
      const nav = document.querySelector(".nav__list");
  
      burger.addEventListener("click", () =&gt; {
          nav.classList.toggle(".nav-active");
      });
  }
  
  const app = () =&gt; {
      navSlide();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      font-size: 62.5%;
  }
  
  body {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  
  @media screen and (max-width: 768px) {
      body {
          overflow-x: hidden;
      }
  }
  
  *,
  *::after,
  *::before {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
  }
  
  body {
      font-family: 'Rokkitt', serif;
      font-weight: 400;
      line-height: 1.7;
      color: #fff;
  }
  
  .header {
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))), url(../img/hero-img.jpg);
      background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../img/hero-img.jpg);
      background-size: cover;
      height: 100vh;
  }
  
  .nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 4rem;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
      background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  }
  
  .nav__list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      width: 40%;
  }
  
  @media screen and (max-width: 1300px) {
      .nav__list {
          width: 50%;
      }
  }
  
  @media screen and (max-width: 1024px) {
      .nav__list {
          width: 65%;
      }
  }
  
  @media screen and (max-width: 768px) {
      .nav__list {
          position: absolute;
          right: 0;
          height: 50vh;
          top: 4rem;
          background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
          background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          width: 42%;
          -webkit-transform: translateX(100%);
          transform: translateX(100%);
      }
  }
  
  .nav__item {
      list-style-type: none;
  }
  
  @media screen and (max-width: 768px) {
      .nav__item {
          opacity: 0;
      }
  }
  
  .nav__link {
      color: #fff;
      text-decoration: none;
      letter-spacing: 3px;
      font-weight: 700;
      font-size: 1.6rem;
  }
  
  .logo {
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 2rem;
  }
  
  .burger {
      display: none;
      cursor: pointer;
  }
  
  .burger__line1, .burger__line2, .burger__line3 {
      width: 20px;
      height: 3px;
      background-color: #fff;
      margin: 3px;
  }
  
  @media screen and (max-width: 768px) {
      .burger {
          display: block;
      }
  }
  
  .nav-active {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      -webkit-transition: -webkit-transform 0.5s ease-in;
      transition: -webkit-transform 0.5s ease-in;
      transition: transform 0.5s ease-in;
      transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>```
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Zakład Kamieniarski - Krzysztof Posiadała&lt;/title&gt;
  
      &lt;link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;section class="header"&gt;
  
          &lt;nav class="nav"&gt;
              &lt;div class="logo"&gt;
                  &lt;h4&gt;The Nav&lt;/h4&gt;
              &lt;/div&gt;
              &lt;ul class="nav__list"&gt;
                  &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;Strona Główna&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;O nas&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;Oferta&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;Kamień&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav__item"&gt;&lt;a href="#" class="nav__link"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="burger"&gt;
                  &lt;div class="burger__line1"&gt;&lt;/div&gt;
                  &lt;div class="burger__line2"&gt;&lt;/div&gt;
                  &lt;div class="burger__line3"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      
  
          &lt;div class="MainText"&gt;
              &lt;h1 class="Company__name"&gt;
                  Zakład Kamieniarski
              &lt;/h1&gt;
              &lt;h2 class="Company__owner"&gt;
                  Krzysztof Posiadała
              &lt;/h2&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Cant figure out why my js function doesn't work, when i click on burger class .nav-active doesn't toogle.</p>
  <p>Please help</p>