extract list of menu links to a config file

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>
   );
 };