less corny header and note meta icons (#746)

* less corny header and note meta icons

* swap out more twemojis

* indicate active page in nav bar

* update favicons

* extract `<MenuLink />` into its own component

* change hover effect to an underline

* cropped header photo

components/Menu/Menu.module.css

@@ -7,39 +7,19 @@
 .menu_item {
   list-style: none;
   display: inline-flex;
-  margin-left: 1.8em;
-}
-
-.menu_item .link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--medium-dark);
-}
-
-.menu_item .link:hover {
-  color: var(--link);
+  margin-left: 1em;
 }
 
 .menu_item .icon {
-  width: 1.6em;
-  height: 1.6em;
-}
-
-.menu_item .label {
-  font-size: 0.95em;
-  font-weight: 500;
-  margin-left: 0.8em;
-  line-height: 1;
-}
-
-.menu_item.theme_toggle {
-  margin-left: 1.25em;
+  width: 1.25em;
+  height: 1.25em;
 }
 
 @media screen and (max-width: 768px) {
   .menu {
     width: 100%;
     justify-content: space-between;
+    margin-left: 1em;
   }
 
   .menu_item {
@@ -50,19 +30,14 @@
     width: 1.8em;
     height: 1.8em;
   }
-
-  /* hide text next to emojis on mobile */
-  .menu_item .label {
-    display: none;
-  }
-
-  .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 {
+    margin-left: 1.4em;
+  }
+
+  /* the home icon is redundant when space is SUPER tight */
   .menu_item:first-of-type {
     display: none;
   }

components/Menu/Menu.tsx

@@ -1,6 +1,7 @@
 import { memo } from "react";
-import Link from "next/link";
+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";
 
@@ -12,43 +13,44 @@ type Props = {
 
 const links = [
   {
-    icon: <HomeIcon className={classNames("icon", styles.icon)} />,
+    icon: <HomeIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Home",
     href: "/",
   },
   {
-    icon: <NotesIcon className={classNames("icon", styles.icon)} />,
+    icon: <NotesIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Notes",
-    href: "/notes/",
+    href: "/notes",
   },
   {
-    icon: <ProjectsIcon className={classNames("icon", styles.icon)} />,
+    icon: <ProjectsIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Projects",
-    href: "/projects/",
+    href: "/projects",
   },
   {
-    icon: <ContactIcon className={classNames("icon", styles.icon)} />,
+    icon: <ContactIcon className={classNames("icon", styles.icon)} aria-hidden={true} />,
     text: "Contact",
-    href: "/contact/",
+    href: "/contact",
   },
 ];
 
-const Menu = ({ className }: Props) => (
-  <ul className={classNames(styles.menu, className)}>
-    {links.map((link, index) => (
-      <li key={index} className={styles.menu_item}>
-        <Link href={link.href} prefetch={false}>
-          <a className={styles.link}>
-            {link.icon} <span className={styles.label}>{link.text}</span>
-          </a>
-        </Link>
-      </li>
-    ))}
+const Menu = ({ className }: Props) => {
+  const router = useRouter();
 
-    <li className={classNames(styles.theme_toggle, styles.menu_item)}>
-      <ThemeToggle className={styles.icon} />
-    </li>
-  </ul>
-);
+  return (
+    <ul className={classNames(styles.menu, className)}>
+      {links.map((link, index) => (
+        <li key={index} className={styles.menu_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.menu_item}>
+        <ThemeToggle className={styles.icon} />
+      </li>
+    </ul>
+  );
+};
 
 export default memo(Menu);