re-add next-remote-watch as local dev server

components/MenuItem/MenuItem.module.css

@@ -0,0 +1,47 @@
+.link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  line-height: 1;
+  text-decoration: none;
+  padding: 0.6em;
+}
+
+.link:hover,
+.link.current {
+  border-bottom: 0.2em solid;
+  margin-bottom: -0.2em;
+}
+
+.link:hover {
+  border-color: var(--kinda-light);
+}
+
+.link.current {
+  border-color: var(--link-underline);
+}
+
+.icon {
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: -0.3em;
+}
+
+.label {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-top: 0.1em;
+  margin-left: 0.8em;
+}
+
+@media screen and (max-width: 768px) {
+  .icon {
+    width: 1.8em;
+    height: 1.8em;
+  }
+
+  /* hide text next to emojis on mobile */
+  .label {
+    display: none;
+  }
+}

components/MenuItem/MenuItem.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import classNames from "classnames";
+
+import styles from "./MenuItem.module.css";
+
+export type MenuItemProps = {
+  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 MenuItem = ({ icon: Icon, href, text, current, className }: MenuItemProps) => {
+  const linkContent = (
+    <>
+      <Icon className={classNames(styles.icon, className)} /> {text && <span className={styles.label}>{text}</span>}
+    </>
+  );
+
+  // 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={classNames(styles.link, current && styles.current, className)}>{linkContent}</a>
+      </Link>
+    );
+  } else {
+    return linkContent;
+  }
+};
+
+export default MenuItem;