Also, I do wonder if Vercel's free plan is enough. Will it only work as a 100% static site, or will it update when I add changes on WordPress?

const [toggle, setToggle] = useState(false);

  const toggleNav = () => {
    setToggle((prevToggle) => !prevToggle); // Update the toggle state when the button is clicked
  };

  useEffect(() => {
    const handleEscapeKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setToggle(false);
      }
    };

    document.addEventListener("keydown", handleEscapeKey);

    return () => {
      document.removeEventListener("keydown", handleEscapeKey);
    };
  }, []);

const [toggle, setToggle] = useState(false);

    const toggleNav = () => {
        setToggle((toggle: boolean) => {
            document.body.setAttribute('data-menu', `${!toggle ? 'show' : 'hide'}`);
            console.log(toggle);
            return !toggle;
        });
    }

<div className="block md:hidden text-base leading-5">
                <div id="mobileMenu" className={`absolute ${toggle ? 'block' : 'hidden'} py-7 inset-0`}>
                    <Menu />
                </div>
                <button onClick={toggleNav} className="relative ml-2 bg-transparent cursor-pointer bg-opacity-20 transition-all duration-100 md:hover:-translate-y-1 rounded-full hover:bg-gray-100/75 dark:hover:bg-gray-800/75 hover:backdrop-blur-sm border border-solid border-white/0 outline outline-1 outline-neutral-200/0 hover:border-white hover:outline-neutral-200 dark:outline-neutral-950/0 dark:hover:border-white/5 dark:hover:outline-neutral-950 hover:shadow z-20" aria-label="Toggle Menu" type="button" style={{transform: 'none'}}>
                    <div className="flex h-8 w-8 items-center justify-center p-2">
                        [redacted SVG]
                    </div>
                </button>
            </div>

import Link from "next/link";
import { Site, menuID } from "../../../lib/info";

interface MenuItem {
  url: string;
  title: string;
}

async function Menu() {
  const res = await fetch(`${Site}/wp-json/options/menu/${menuID}`, { next: { revalidate: 10 } });
  const data: MenuItem[] = await res.json();

  return (
    <>
      {data.map((item) => (
        <Link key={item.url} href={item.url} passHref legacyBehavior>
          <a className="menu-item relative py-1 px-2 bg-transparent bg-opacity-20 transition-all duration-100 md:hover:-translate-y-1 rounded hover:bg-gray-100/75 dark:hover:bg-gray-800/75 hover:backdrop-blur-sm border border-solid border-white/0 outline outline-1 outline-neutral-200/0 hover:border-white hover:outline-neutral-200 dark:outline-neutral-950/0 dark:hover:border-white/5 dark:hover:outline-neutral-950 hover:shadow z-20">
            {item.title}
          </a>
        </Link>
      ))}
    </>
  );
}

export default Menu;

import WpImage from "./wpimage";
import { Site } from "../../../lib/info";

interface LogoData {
  site_logo: number;
  name: string;
}

async function Logo() {
  const res = await fetch(`${Site}/wp-json/`, { next: { revalidate: 10 } });
  const data: LogoData = await res.json();

  if (data.site_logo) {
    return (
      <>
        <WpImage
          id={data.site_logo}
          width={32}
          height={32}
          alt={data.name}
          className="rounded-full outline outline-2 outline-black/25 dark:outline-white/25 mr-2"
        />
        <span>{data.name}</span>
      </>
    );
  }
  
  return null;
}

export default Logo;