jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 06:38:30 -04:00
Code Issues

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

Browse Source
This commit is contained in:
Jake Jarvis 2022-01-06 20:11:15 -05:00
parent 17375ef876
commit 3528707e52
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
2 changed files with 4 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/page-header/Menu.tsx
View File

@ -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}`} />,

10
components/page-header/ThemeToggle.tsx
View File

@ -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")}