Close the mobile menu before navigation

Author: aurorascharff

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -26,6 +26,7 @@ interface SidebarLinkProps {
   icon?: React.ReactNode;
   isExpanded?: boolean;
   hideArrow?: boolean;
+  onNavigate?: () => void;
 }
 
 export function SidebarLink({
@@ -36,6 +37,7 @@ export function SidebarLink({
   level,
   isExpanded,
   hideArrow,
+  onNavigate,
 }: SidebarLinkProps) {
   const ref = useRef<HTMLAnchorElement>(null);
 
@@ -59,6 +61,7 @@ export function SidebarLink({
       ref={ref}
       title={title}
       target={target}
+      onNavigate={onNavigate}
       passHref
       aria-current={selected ? 'page' : undefined}
       className={cn(

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -23,6 +23,7 @@ interface SidebarRouteTreeProps {
   breadcrumbs: RouteItem[];
   routeTree: RouteItem;
   level?: number;
+  onNavigate?: () => void;
 }
 
 function CollapseWrapper({
@@ -81,6 +82,7 @@ export function SidebarRouteTree({
   breadcrumbs,
   routeTree,
   level = 0,
+  onNavigate,
 }: SidebarRouteTreeProps) {
   const slug = (usePathname() || '/').split(/[\?\#]/)[0];
   const currentRoutes = routeTree.routes as RouteItem[];
@@ -109,6 +111,7 @@ export function SidebarRouteTree({
                 isForceExpanded={isForceExpanded}
                 routeTree={{title, routes}}
                 breadcrumbs={[]}
+                onNavigate={onNavigate}
               />
             );
           } else if (routes) {
@@ -128,13 +131,15 @@ export function SidebarRouteTree({
                   version={version}
                   isExpanded={isExpanded}
                   hideArrow={isForceExpanded}
+                  onNavigate={onNavigate}
                 />
                 <CollapseWrapper duration={250} isExpanded={isExpanded}>
                   <SidebarRouteTree
                     isForceExpanded={isForceExpanded}
                     routeTree={{title, routes}}
                     breadcrumbs={breadcrumbs}
                     level={level + 1}
+                    onNavigate={onNavigate}
                   />
                 </CollapseWrapper>
               </li>
@@ -149,6 +154,7 @@ export function SidebarRouteTree({
                   level={level}
                   title={title}
                   version={version}
+                  onNavigate={onNavigate}
                 />
               </li>
             );

src/components/Layout/TopNav/TopNav.tsx

@@ -16,6 +16,7 @@ import {
   useRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   startTransition,
   Suspense,
 } from 'react';
@@ -117,7 +118,9 @@ function Link({
   href,
   children,
   ...props
-}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+}: React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  onNavigate?: () => void;
+}) {
   return (
     <NextLink
       href={`${href}`}
@@ -128,11 +131,12 @@ function Link({
   );
 }
 
-function NavItem({url, isActive, children}: any) {
+function NavItem({url, isActive, children, onNavigate}: any) {
   return (
     <div className="flex flex-auto sm:flex-1">
       <Link
         href={url}
+        onNavigate={onNavigate}
         className={cn(
           'active:scale-95 transition-transform w-full text-center outline-link py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap',
           !isActive && 'hover:bg-primary/5 hover:dark:bg-primary-dark/5',
@@ -169,14 +173,21 @@ export default function TopNav({
   const [showSearch, setShowSearch] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const scrollParentRef = useRef<HTMLDivElement>(null);
+  const closeMenu = useCallback(() => setOpenMenuPath(null), []);
   // Deriving from the path hides the menu as soon as a navigation commits.
   // Forget the path afterwards, so going Back doesn't reopen the menu.
   if (openMenuPath !== null && openMenuPath !== asPath) {
-    setOpenMenuPath(null);
+    closeMenu();
   }
   const isMenuOpen = openMenuPath === asPath;
   const {breadcrumbs} = getRouteMeta(asPath, routeTree);
 
+  // The mobile menu is transient UI. Reset it when Activity hides this route
+  // so going Back does not restore the menu in its open state.
+  useLayoutEffect(() => {
+    return () => setOpenMenuPath(null);
+  }, []);
+
   // HACK. Fix up the data structures instead.
   if ((routeTree as any).routes.length === 1) {
     routeTree = (routeTree as any).routes[0];
@@ -417,20 +428,28 @@ export default function TopNav({
                 {/* No fallback UI so need to be careful not to suspend directly inside. */}
                 <Suspense fallback={null}>
                   <div className="ps-3 xs:ps-5 xs:gap-0.5 xs:text-base overflow-x-auto flex flex-row lg:hidden text-base font-bold text-secondary dark:text-secondary-dark">
-                    <NavItem isActive={section === 'learn'} url="/learn">
+                    <NavItem
+                      isActive={section === 'learn'}
+                      url="/learn"
+                      onNavigate={closeMenu}>
                       Learn
                     </NavItem>
                     <NavItem
                       isActive={section === 'reference'}
-                      url="/reference/react">
+                      url="/reference/react"
+                      onNavigate={closeMenu}>
                       Reference
                     </NavItem>
                     <NavItem
                       isActive={section === 'community'}
-                      url="/community">
+                      url="/community"
+                      onNavigate={closeMenu}>
                       Community
                     </NavItem>
-                    <NavItem isActive={section === 'blog'} url="/blog">
+                    <NavItem
+                      isActive={section === 'blog'}
+                      url="/blog"
+                      onNavigate={closeMenu}>
                       Blog
                     </NavItem>
                   </div>
@@ -445,6 +464,7 @@ export default function TopNav({
                     routeTree={routeTree}
                     breadcrumbs={breadcrumbs}
                     isForceExpanded={isMenuOpen}
+                    onNavigate={closeMenu}
                   />
                 </Suspense>
                 <div className="h-16" />