Header

Header.jsx

import React, { useEffect, useState } from "react";

export default function Header() {
  const [small, setSmall] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener("scroll", () =>
        setSmall(window.pageYOffset > 200)
      );
    }
  }, []);

  return (
    <header className={`header ${
          small ? "small" : ""
        }`}>
      Logo etc.
    </header>
  );
}