custom <Image /> wrapper now supports static imports too

components/Menu/Menu.module.css

@@ -4,35 +4,35 @@
   margin: 0;
 }
 
-.menu li {
+.menu_item {
   list-style: none;
   display: inline-flex;
   margin-left: 1.8em;
 }
 
-.menu li .link {
+.menu_item .link {
   display: inline-flex;
   align-items: center;
   color: var(--medium-dark);
 }
 
-.menu li .link:hover {
+.menu_item .link:hover {
   color: var(--link);
 }
 
-.menu li .icon {
+.menu_item .icon {
   width: 1.6em;
   height: 1.6em;
 }
 
-.menu li span {
+.menu_item .label {
   font-size: 0.95em;
   font-weight: 500;
   margin-left: 0.8em;
   line-height: 1;
 }
 
-.menu li.theme_toggle {
+.menu_item.theme_toggle {
   margin-left: 1.25em;
 }
 
@@ -42,28 +42,28 @@
     justify-content: space-between;
   }
 
-  .menu li {
+  .menu_item {
     margin-left: 0;
   }
 
-  .menu li .icon {
+  .menu_item .icon {
     width: 1.8em;
     height: 1.8em;
   }
 
   /* hide text next to emojis on mobile */
-  .menu li span {
+  .menu_item .label {
     display: none;
   }
 
-  .menu li.theme_toggle {
+  .menu_item.theme_toggle {
     margin-left: -0.3em;
   }
 }
 
 /* the home icon is redundant when space is SUPER tight */
 @media screen and (max-width: 380px) {
-  .menu li:first-of-type {
+  .menu_item:first-of-type {
     display: none;
   }
 }

components/Menu/Menu.tsx

@@ -6,6 +6,10 @@ import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";
 
 import styles from "./Menu.module.css";
 
+type Props = {
+  className?: string;
+};
+
 const links = [
   {
     icon: <HomeIcon className={classNames("icon", styles.icon)} />,
@@ -29,19 +33,19 @@ const links = [
   },
 ];
 
-const Menu = () => (
-  <ul className={styles.menu}>
+const Menu = ({ className }: Props) => (
+  <ul className={classNames(styles.menu, className)}>
     {links.map((link, index) => (
-      <li key={index}>
+      <li key={index} className={styles.menu_item}>
         <Link href={link.href} prefetch={false}>
           <a className={styles.link}>
-            {link.icon} <span>{link.text}</span>
+            {link.icon} <span className={styles.label}>{link.text}</span>
           </a>
         </Link>
       </li>
     ))}
 
-    <li className={styles.theme_toggle}>
+    <li className={classNames(styles.theme_toggle, styles.menu_item)}>
       <ThemeToggle className={styles.icon} />
     </li>
   </ul>