responsive style adjustments

components/page-header/Menu.tsx

@@ -1,27 +1,27 @@
 import dynamic from "next/dynamic";
-import MenuItem from "./MenuItem";
+import Link from "next/link";
 import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
 import styles from "./Menu.module.scss";
 
 const menuItems = [
   {
-    icon: <HomeIcon />,
+    icon: <HomeIcon className={`icon ${styles.icon}`} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon />,
+    icon: <NotesIcon className={`icon ${styles.icon}`} />,
     text: "Notes",
     href: "/notes/",
   },
   {
-    icon: <ProjectsIcon />,
+    icon: <ProjectsIcon className={`icon ${styles.icon}`} />,
     text: "Projects",
     href: "/projects/",
   },
   {
-    icon: <ContactIcon />,
+    icon: <ContactIcon className={`icon ${styles.icon}`} />,
     text: "Contact",
     href: "/contact/",
   },
@@ -35,11 +35,15 @@ export default function Menu() {
     <ul className={styles.menu}>
       {menuItems.map((item, index) => (
         <li key={index} className={styles.item}>
-          <MenuItem {...item} />
+          <Link href={item.href} prefetch={false}>
+            <a className={styles.link}>
+              {item.icon} <span className={styles.text}>{item.text}</span>
+            </a>
+          </Link>
         </li>
       ))}
       <li className={`${styles.item} ${styles.theme_toggle}`}>
-        <ThemeToggle />
+        <ThemeToggle className={styles.icon} />
       </li>
     </ul>
   );