title: Converting the JS of a page to React
body: <p>I am working on my new website and learning React at the same time. So I am trying to convert the JS functionality of my old website which was made with no JS librabries or frameworks to React.</p>
  <p>The old JS:</p>
  <pre><code>const navSlide = () =&gt; {
      const burger = document.querySelector(&quot;.burger&quot;);
      const navigationElementHeight = document.querySelector(&quot;#navigation-bar&quot;)
          .offsetHeight;
      const nav = document.querySelector(&quot;.nav-links&quot;);
      const navLinks = document.querySelectorAll(&quot;.nav-links a&quot;);
      const pageContent = document.querySelector(&quot;.content&quot;);
  
      window.addEventListener(&quot;resize&quot;, () =&gt; {
          if (window.innerWidth &gt; 576) {
              nav.classList.remove(&quot;nav-active&quot;);
              burger.classList.remove(&quot;toggle&quot;);
              pageContent.style.animation = &quot;&quot;;
              navLinks.forEach(link =&gt; {
                  if (link.style.animation) {
                      link.style.animation = &quot;&quot;;
                  }
              });
          }
      });
  
      burger.addEventListener(&quot;click&quot;, () =&gt; {
          nav.classList.toggle(&quot;nav-active&quot;);
          nav.style.top = `${navigationElementHeight}px`;
  
          navLinks.forEach((link, index) =&gt; {
              if (link.style.animation) {
                  link.style.animation = &quot;&quot;;
                  if (!Object.is(pageContent, null)) {
                      pageContent.style.animation =
                          &quot;movePageContentLeft 0.5s ease forwards&quot;;
                  }
              } else {
                  link.style.animation = `navLinkFadeIn 0.3s ease forwards ${index / 7 +
                      0.5}s`;
                  if (!Object.is(pageContent, null)) {
                      pageContent.style.animation =
                          &quot;movePageContentRight 0.5s ease forwards&quot;;
                  }
              }
          });
  
          burger.classList.toggle(&quot;toggle&quot;);
      });
  };
  
  navSlide();
  </code></pre>
  <p>The react component that I made:</p>
  <pre><code>import React, { useState } from &quot;react&quot;
  import { Link } from &quot;gatsby&quot;
  import styles from &quot;./styling/navbar.module.less&quot;
  
  const Navbar = ( props ) =&gt; {
  
    let toggleNavBar = () =&gt; {
      
      //Toggle the navbar
  
    }
  
    window.addEventListener('resize', windowResized)
      
    return (
      &lt;nav id={&quot;navigation-bar&quot;}&gt;
        &lt;div className={styles.navLinks}&gt;
          {props.pages.map(page =&gt; (
            &lt;Link key={page.name} className={`${styles.navLink} ${styles.navElement} ${styles.navLinkHoverEffect}`} to={page.link}&gt;
                {page.name}
            &lt;/Link&gt;
          ))}
        &lt;/div&gt;
        //Burger Button
        &lt;div className={styles.burger} onClick={toggleNavBar}&gt;
          &lt;div className={styles.line1}&gt;&lt;/div&gt;
          &lt;div className={styles.line2}&gt;&lt;/div&gt;
          &lt;div className={styles.line3}&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    )
  }
  
  export default Navbar
  
  </code></pre>
  <p>So the burger button should apply a class to the <code>div</code> inside the <code>nav</code> element when pressed. What is the best way to do that? Also what do you think about the component?</p>
  <p>Thanks!</p>