toggle is still flashing, try reverting to importing dynamically...?

components/page-header/Menu.tsx

@@ -1,9 +1,12 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import ThemeToggle from "./ThemeToggle";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
 import styles from "./Menu.module.scss";
 
+// ensure the theme toggle isn't evaluated server-side
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
+
 const links = [
   {
     icon: <HomeIcon className={`icon ${styles.icon}`} />,

components/page-header/ThemeToggle.tsx

@@ -1,19 +1,9 @@
-import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import { BulbOffIcon, BulbOnIcon } from "../icons";
 
 const ThemeToggle = ({ className = "" }) => {
-  const [mounted, setMounted] = useState(false);
   const { resolvedTheme, setTheme } = useTheme();
 
-  // avoid hydration mismatch:
-  // https://github.com/pacocoursey/next-themes#avoid-hydration-mismatch
-  useEffect(() => setMounted(true), []);
-  if (!mounted) {
-    // always return one of the bulbs just so there are never flashing layout shifts
-    return <BulbOffIcon className={`icon ${className}`} />;
-  }
-
   return (
     <button
       onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}