Migrate to app router (#2254)

components/MenuItem/MenuItem.tsx

@@ -1,74 +1,38 @@
+import clsx from "clsx";
 import Link from "../Link";
-import { styled, theme } from "../../lib/styles/stitches.config";
+import type { Route } from "next";
 import type { IconType } from "react-icons";
 
-const MenuLink = styled(Link, {
-  display: "inline-block",
-  color: theme.colors.mediumDark,
-  padding: "0.6em",
-
-  variants: {
-    // indicate active page/section
-    current: {
-      true: {
-        marginBottom: "-0.2em",
-        borderBottom: `0.2em solid ${theme.colors.linkUnderline}`,
-      },
-      false: {
-        "&:hover, &:focus-visible": {
-          marginBottom: "-0.2em",
-          borderBottom: `0.2em solid ${theme.colors.kindaLight}`,
-        },
-      },
-    },
-  },
-});
-
-const Icon = styled("svg", {
-  display: "inline",
-  width: "1.25em",
-  height: "1.25em",
-  verticalAlign: "-0.3em",
-
-  "@medium": {
-    width: "1.8em",
-    height: "1.8em",
-  },
-});
-
-const Label = styled("span", {
-  fontSize: "0.925em",
-  fontWeight: 500,
-  letterSpacing: "0.025em",
-  marginLeft: "0.7em",
-
-  "@medium": {
-    display: "none",
-  },
-});
+import styles from "./MenuItem.module.css";
 
 export type MenuItemProps = {
-  icon?: IconType;
+  Icon?: IconType;
   text?: string;
-  href?: string;
+  href?: Route;
   current?: boolean;
   className?: string;
 };
 
-const MenuItem = ({ icon, text, href, current, className }: MenuItemProps) => {
+const MenuItem = ({ Icon, text, href, current, className }: MenuItemProps) => {
   const item = (
     <>
-      {icon && <Icon as={icon} />}
-      {text && <Label>{text}</Label>}
+      {Icon && <Icon className={styles.icon} />}
+      {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 (
-      <MenuLink href={href} className={className} current={current} title={text} underline={false} aria-label={text}>
+      <Link
+        href={href}
+        className={clsx(styles.link, current && styles.current, className)}
+        title={text}
+        underline={false}
+        aria-label={text}
+      >
         {item}
-      </MenuLink>
+      </Link>
     );
   }