diff --git a/components/page-header/Header.module.css b/components/page-header/Header.module.css
index 9641a168..260b32d9 100644
--- a/components/page-header/Header.module.css
+++ b/components/page-header/Header.module.css
@@ -2,6 +2,7 @@
position: sticky;
top: 0;
width: 100%;
+ height: 4.5em;
padding: 0.7em 1.5em;
border-bottom: 1px solid var(--kinda-light);
background-color: var(--background-header);
@@ -108,6 +109,7 @@
@media screen and (max-width: 768px) {
.header {
padding: 0.75em 1.25em;
+ height: 5.9em;
}
.left {
diff --git a/components/page-header/Header.tsx b/components/page-header/Header.tsx
index b6caf7ef..d7f91f33 100644
--- a/components/page-header/Header.tsx
+++ b/components/page-header/Header.tsx
@@ -1,16 +1,13 @@
import { memo } from "react";
-import dynamic from "next/dynamic";
import Link from "next/link";
import Image from "next/image";
+import ThemeToggle from "./ThemeToggle";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import meJpg from "../../public/static/images/me.jpg";
import styles from "./Header.module.css";
-// ensure the theme toggle isn't evaluated server-side
-const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
-
const links = [
{
icon: ,
diff --git a/components/page-header/ThemeToggle.module.css b/components/page-header/ThemeToggle.module.css
new file mode 100644
index 00000000..ba5dc8e2
--- /dev/null
+++ b/components/page-header/ThemeToggle.module.css
@@ -0,0 +1,6 @@
+.button {
+ border: 0;
+ padding: 0;
+ background: none;
+ cursor: pointer;
+}
diff --git a/components/page-header/ThemeToggle.tsx b/components/page-header/ThemeToggle.tsx
index b1418252..f5bb78bd 100644
--- a/components/page-header/ThemeToggle.tsx
+++ b/components/page-header/ThemeToggle.tsx
@@ -1,6 +1,8 @@
-import { memo } from "react";
+import { useEffect, useState, memo } from "react";
import { useTheme } from "next-themes";
+import styles from "./ThemeToggle.module.css";
+
// modified from Twemoji lightbulb:
const BulbIcon = ({ on = false, className = "" }) => (