extract list of menu links to a config file

components/CodeBlock/CodeBlock.tsx

@@ -19,7 +19,7 @@ const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps)
       <div className={styles.block}>
         <CopyButton source={children} className={styles.copy_btn} />
         <code
-          className={cx({ code: true, highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
+          className={cx(styles.code, { highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
           {...rest}
         >
           {children}

components/ContactForm/ContactForm.tsx

@@ -103,7 +103,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
             {({ field, meta }) => (
               <input
                 type="text"
-                className={cx({ input: true, missing: meta.error && meta.touched })}
+                className={cx(styles.input, { missing: meta.error && meta.touched })}
                 placeholder="Name"
                 disabled={success}
                 {...field}
@@ -116,7 +116,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
               <input
                 type="email"
                 inputMode="email"
-                className={cx({ input: true, missing: meta.error && meta.touched })}
+                className={cx(styles.input, { missing: meta.error && meta.touched })}
                 placeholder="Email"
                 disabled={success}
                 {...field}
@@ -127,7 +127,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
           <Field name="message">
             {({ field, meta }) => (
               <TextareaAutosize
-                className={cx({ input: true, textarea: true, missing: meta.error && meta.touched })}
+                className={cx(styles.input, styles.textarea, { missing: meta.error && meta.touched })}
                 placeholder="Write something..."
                 minRows={5}
                 disabled={success}
@@ -154,7 +154,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
 
           <div className={styles.action_row}>
             <button
-              className={cx({ btn_submit: true, hidden: success })}
+              className={cx(styles.btn_submit, { hidden: success })}
               type="submit"
               title="Send Message"
               aria-label="Send Message"

components/CopyButton/CopyButton.tsx

@@ -47,7 +47,7 @@ const CopyButton = forwardRef(function CopyButton(
 
   return (
     <button
-      className={cx({ button: true, success: !!copied }, className)}
+      className={cx(styles.button, { success: !!copied }, className)}
       title="Copy to clipboard"
       aria-label="Copy to clipboard"
       onClick={handleCopy}

components/Menu/Menu.module.css

@@ -4,18 +4,12 @@
   margin: 0;
 }
 
-.link {
+.item {
   list-style: none;
   display: inline-flex;
   margin-left: 1em;
 }
 
-.icon {
-  width: 1.25em;
-  height: 1.25em;
-  vertical-align: -0.3em;
-}
-
 @media screen and (max-width: 768px) {
   .menu {
     width: 100%;
@@ -23,14 +17,9 @@
     margin-left: 1em;
   }
 
-  .link {
+  .item {
     margin-left: 0;
   }
-
-  .icon {
-    width: 1.8em;
-    height: 1.8em;
-  }
 }
 
 @media screen and (max-width: 380px) {
@@ -39,7 +28,7 @@
   }
 
   /* the home icon is redundant when space is SUPER tight */
-  .link:first-of-type {
+  .item:first-of-type {
     display: none;
   }
 }

components/Menu/Menu.tsx

@@ -2,8 +2,7 @@ import { memo } from "react";
 import { useRouter } from "next/router";
 import classNames from "classnames";
 import MenuLink from "../MenuLink/MenuLink";
-import ThemeToggle from "../ThemeToggle/ThemeToggle";
-import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";
+import { menuLinks } from "../../lib/config/menu";
 
 import styles from "./Menu.module.css";
 
@@ -11,44 +10,17 @@ type MenuProps = {
   className?: string;
 };
 
-const links = [
-  {
-    icon: <HomeIcon className={styles.icon} />,
-    text: "Home",
-    href: "/",
-  },
-  {
-    icon: <NotesIcon className={styles.icon} />,
-    text: "Notes",
-    href: "/notes",
-  },
-  {
-    icon: <ProjectsIcon className={styles.icon} />,
-    text: "Projects",
-    href: "/projects",
-  },
-  {
-    icon: <ContactIcon className={styles.icon} />,
-    text: "Contact",
-    href: "/contact",
-  },
-];
-
 const Menu = ({ className }: MenuProps) => {
   const router = useRouter();
 
   return (
     <ul className={classNames(styles.menu, className)}>
-      {links.map((link, index) => (
-        <li key={index} className={styles.link}>
+      {menuLinks.map((link, index) => (
+        <li key={index} className={styles.item}>
           {/* kinda weird/hacky way to determine if the *first part* of the current path matches this href */}
           <MenuLink {...link} current={link.href === `/${router.pathname.split("/")[1]}`} />
         </li>
       ))}
-
-      <li className={styles.link}>
-        <ThemeToggle className={styles.icon} />
-      </li>
     </ul>
   );
 };

components/MenuLink/MenuLink.module.css

@@ -21,6 +21,12 @@
   border-color: var(--link-underline);
 }
 
+.icon {
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.3em;
+}
+
 .label {
   font-size: 0.95em;
   font-weight: 500;
@@ -29,6 +35,11 @@
 }
 
 @media screen and (max-width: 768px) {
+  .icon {
+    width: 1.8em;
+    height: 1.8em;
+  }
+
   /* hide text next to emojis on mobile */
   .label {
     display: none;

components/MenuLink/MenuLink.tsx

@@ -1,24 +1,33 @@
-import classNames from "classnames/bind";
 import Link from "next/link";
-import { ReactNode } from "react";
+import classNames from "classnames/bind";
 
 import styles from "./MenuLink.module.css";
 const cx = classNames.bind(styles);
 
-type MenuLinkProps = {
-  href: string;
-  icon: ReactNode;
-  text: string;
+export type MenuLinkProps = {
+  href?: string;
+  text?: string;
   current?: boolean;
   className?: string;
+
+  // `any` avoids conflicts with @svgr/webpack, see: node_modules/next/image-types/global.d.ts
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  icon: any;
 };
 
-const MenuLink = ({ href, icon, text, current, className }: MenuLinkProps) => (
-  <Link href={href} prefetch={false}>
-    <a className={cx(styles.link, { current: !!current }, className)}>
-      {icon} <span className={styles.label}>{text}</span>
-    </a>
-  </Link>
-);
+const MenuLink = ({ icon: Icon, href, text, current, className }: MenuLinkProps) => {
+  // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
+  if (href) {
+    return (
+      <Link href={href} prefetch={false}>
+        <a className={cx(styles.link, { current: !!current }, className)}>
+          <Icon className={styles.icon} /> <span className={styles.label}>{text}</span>
+        </a>
+      </Link>
+    );
+  } else {
+    return <Icon className={classNames(styles.icon, className)} />;
+  }
+};
 
 export default MenuLink;

components/ThemeToggle/ThemeToggle.module.css

@@ -4,17 +4,9 @@
   margin-right: -0.6em;
   background: none;
   cursor: pointer;
-  display: inline-flex;
-  align-items: center;
   color: var(--medium-dark);
 }
 
 .button:hover {
   color: var(--warning);
 }
-
-.icon {
-  width: 1.2em;
-  height: 1.2em;
-  vertical-align: -0.2em;
-}