extract list of menu links to a config file

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;