From 48d3696837771dd448e0d76d8bffbf1319cd70a8 Mon Sep 17 00:00:00 2001
From: Kai Chen <kaichen0728@gmail.com>
Date: Fri, 10 Jul 2026 02:07:42 -0700
Subject: [PATCH] fix: close the mobile menu when navigating via the site-name
 link

The dropdown links closed the menu on tap but the top-left brand link
did not. Close on brand click, and also reset the menu whenever the
pathname changes (render-time adjustment) so back/forward navigation
collapses it too.

Co-authored-by: Claude <noreply@anthropic.com>
---
 app/components/nav.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/components/nav.tsx b/app/components/nav.tsx
index cb40a32..b4439f4 100644
--- a/app/components/nav.tsx
+++ b/app/components/nav.tsx
@@ -41,11 +41,19 @@ export default function Nav() {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen]);
 
+  // Close the mobile menu on any route change (covers back/forward too)
+  const [prevPathname, setPrevPathname] = useState(pathname);
+  if (prevPathname !== pathname) {
+    setPrevPathname(pathname);
+    setIsOpen(false);
+  }
+
   return (
     <nav ref={navRef} className="fixed top-0 left-0 right-0 z-50 border-b border-zinc-200 dark:border-zinc-800 bg-[var(--background)]">
       <div className="max-w-[1180px] mx-auto px-4 md:px-8 py-4 flex items-center justify-between">
         <Link
           href="/"
+          onClick={() => setIsOpen(false)}
           style={{ fontFamily: "var(--font-nunito)", fontWeight: 600 }}
           className="text-base tracking-tight text-zinc-700 dark:text-zinc-300 hover:text-black dark:hover:text-white"
         >