Rename MobileMenu -> Menu

app/components/layout/Menu.tsx

@@ -2,9 +2,8 @@ import clsx from "clsx";
 import { Link } from "@remix-run/react";
 import navItems from "./nav-items.json";
 
-// xxx: rename to Menu
 // xxx: overflows but maybe on chrome mobile emulator only?
-export function MobileMenu({
+export function Menu({
   expanded,
   closeMenu,
 }: {
@@ -12,21 +11,21 @@ export function MobileMenu({
   closeMenu: () => void;
 }) {
   return (
-    <div className={clsx("layout__mobile-nav", { expanded })}>
-      <div className="layout__mobile-nav__links">
+    <div className={clsx("layout__menu", { expanded })}>
+      <div className="layout__menu__links">
         {navItems.map((navItem, i) => (
           <Link
             key={navItem.name}
-            className={clsx("layout__mobile-nav__link", {
+            className={clsx("layout__menu__link", {
               first: i === 0,
               last: i + 1 === navItems.length,
             })}
             to={navItem.url ?? navItem.name}
             onClick={closeMenu}
-            data-cy={`mobile-nav-link-${navItem.name}`}
+            data-cy={`menu-link-${navItem.name}`}
           >
             <img
-              className="layout__mobile-nav__link__icon"
+              className="layout__menu__link__icon"
               src={`/img/layout/${navItem.name.replace(" ", "")}.webp`}
               alt={navItem.name}
             />

app/components/layout/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HamburgerButton } from "./HamburgerButton";
-import { MobileMenu } from "./MobileMenu";
+import { Menu } from "./Menu";
 import { UserItem } from "./UserItem";
 import navItems from "./nav-items.json";
 import { useLocation } from "@remix-run/react";
@@ -45,7 +45,7 @@ export const Layout = React.memo(function Layout({
           />
         </div>
       </header>
-      <MobileMenu expanded={menuOpen} closeMenu={() => setMenuOpen(false)} />
+      <Menu expanded={menuOpen} closeMenu={() => setMenuOpen(false)} />
       {children}
     </>
   );

app/styles/layout.css

@@ -89,7 +89,7 @@
   transform: translateY(-5px) rotate(-45deg);
 }
 
-.layout__mobile-nav {
+.layout__menu {
   position: absolute;
   z-index: 500;
   top: 0;
@@ -108,16 +108,16 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.layout__mobile-nav.expanded {
+.layout__menu.expanded {
   margin-right: 0;
 }
 
-.layout__mobile-nav__link__icon {
+.layout__menu__link__icon {
   width: 2rem;
   height: 2rem;
 }
 
-.layout__mobile-nav__links {
+.layout__menu__links {
   display: grid;
   justify-content: center;
   grid-auto-columns: 1fr;
@@ -125,7 +125,7 @@
   padding-block: var(--s-4);
 }
 
-.layout__mobile-nav__link {
+.layout__menu__link {
   display: flex;
   align-items: center;
   padding: 0 var(--s-4);
@@ -140,11 +140,11 @@
   text-transform: capitalize;
 }
 
-.layout__mobile-nav__link.first {
+.layout__menu__link.first {
   border-radius: var(--rounded) var(--rounded) 0 0;
 }
 
-.layout__mobile-nav__link.last {
+.layout__menu__link.last {
   border-radius: 0 0 var(--rounded) var(--rounded);
 }