Converting the JS of a page to React

Question

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.

The old JS:

const navSlide = () => {
    const burger = document.querySelector(".burger");
    const navigationElementHeight = document.querySelector("#navigation-bar")
        .offsetHeight;
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links a");
    const pageContent = document.querySelector(".content");

    window.addEventListener("resize", () => {
        if (window.innerWidth > 576) {
            nav.classList.remove("nav-active");
            burger.classList.remove("toggle");
            pageContent.style.animation = "";
            navLinks.forEach(link => {
                if (link.style.animation) {
                    link.style.animation = "";
                }
            });
        }
    });

    burger.addEventListener("click", () => {
        nav.classList.toggle("nav-active");
        nav.style.top = `${navigationElementHeight}px`;

        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = "";
                if (!Object.is(pageContent, null)) {
                    pageContent.style.animation =
                        "movePageContentLeft 0.5s ease forwards";
                }
            } else {
                link.style.animation = `navLinkFadeIn 0.3s ease forwards ${index / 7 +
                    0.5}s`;
                if (!Object.is(pageContent, null)) {
                    pageContent.style.animation =
                        "movePageContentRight 0.5s ease forwards";
                }
            }
        });

        burger.classList.toggle("toggle");
    });
};

navSlide();

The react component that I made:

import React, { useState } from "react"
import { Link } from "gatsby"
import styles from "./styling/navbar.module.less"

const Navbar = ( props ) => {

  let toggleNavBar = () => {
    
    //Toggle the navbar

  }

  window.addEventListener('resize', windowResized)
    
  return (
    <nav id={"navigation-bar"}>
      <div className={styles.navLinks}>
        {props.pages.map(page => (
          <Link key={page.name} className={`${styles.navLink} ${styles.navElement} ${styles.navLinkHoverEffect}`} to={page.link}>
              {page.name}
          </Link>
        ))}
      </div>
      //Burger Button
      <div className={styles.burger} onClick={toggleNavBar}>
        <div className={styles.line1}></div>
        <div className={styles.line2}></div>
        <div className={styles.line3}></div>
      </div>
    </nav>
  )
}

export default Navbar

So the burger button should apply a class to the div inside the nav element when pressed. What is the best way to do that? Also what do you think about the component?

Thanks!

Answer 1

make a state prop

const [isClicked, toggleIsClicked] = useState(false);

a toggle function

const toggleNavBar = () => {
  toggleIsClicked((isClicked)=> !isClicked); 
}

and conditionally render the div's class

 <div className={isClicked ? styles.navLinks : null}>

Edit: For the animation not sure of the exact implementation off the top of my head but:

create a state prop that houses the delay time and remove animation-delay from your css selector.

const [delay, setDelay] = useEffect(0);

pass the state prop to the style attribute

<div className="your-animation-class" style={{animationDelay: `${delay}s`}}>

and in your button also call

setDelay((delay) => delay + .05)

The above implements a starting delay of 0 but you could set that to anything.