From 4bbec480a9cc6648db8a3b9f71c7265a678901e5 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 29 Sep 2025 15:23:50 +0300
Subject: [PATCH] docs: fix mobile menu not closing when clicking a link
 (#13618)

---
 .../src/components/MainNav/MobileMenu/Main/index.tsx   |  8 +++++++-
 .../components/MainNav/MobileMenu/SubMenu/index.tsx    |  8 +++++++-
 .../src/components/MainNav/MobileMenu/index.tsx        | 10 +++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx
index 4dc2792119..2e1f18389d 100644
--- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/Main/index.tsx
@@ -9,10 +9,12 @@ import { SelectedMenu } from ".."
 
 type MainNavMobileMainMenu = {
   setSelectedMenus: React.Dispatch<React.SetStateAction<SelectedMenu>>
+  onOpenLink?: () => void
 }
 
 export const MainNavMobileMainMenu = ({
   setSelectedMenus: setSelectedMenu,
+  onOpenLink,
 }: MainNavMobileMainMenu) => {
   const { navItems } = useMainNav()
 
@@ -44,7 +46,11 @@ export const MainNavMobileMainMenu = ({
             }}
           >
             {item.type === "link" && (
-              <Link href={item.link} className="block w-full">
+              <Link
+                href={item.link}
+                className="block w-full"
+                onClick={() => onOpenLink?.()}
+              >
                 {item.title}
               </Link>
             )}
diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
index 74db4354d8..ab665ab308 100644
--- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/SubMenu/index.tsx
@@ -11,12 +11,14 @@ type MainNavMobileSubMenuProps = {
   menu: MenuItem[]
   title: string
   setSelectedMenus: React.Dispatch<React.SetStateAction<SelectedMenu>>
+  onOpenLink?: () => void
 }
 
 export const MainNavMobileSubMenu = ({
   menu,
   title,
   setSelectedMenus,
+  onOpenLink,
 }: MainNavMobileSubMenuProps) => {
   const filteredItems: (MenuItemLink | MenuItemSubMenu)[] = useMemo(() => {
     return menu.filter(
@@ -38,7 +40,11 @@ export const MainNavMobileSubMenu = ({
             )}
           >
             {item.type === "link" && (
-              <Link href={item.link} className="block w-full">
+              <Link
+                href={item.link}
+                className="block w-full"
+                onClick={() => onOpenLink?.()}
+              >
                 {item.title}
               </Link>
             )}
diff --git a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
index da56ae73e5..646d18aecf 100644
--- a/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
+++ b/www/packages/docs-ui/src/components/MainNav/MobileMenu/index.tsx
@@ -20,6 +20,10 @@ export const MainNavMobileMenu = () => {
   const [selectedMenus, setSelectedMenus] = useState<SelectedMenu>([])
   const ref = useRef(null)
 
+  const handleOpenLink = () => {
+    setIsOpen(false)
+  }
+
   return (
     <div className="flex lg:hidden justify-center items-center">
       <Button
@@ -57,7 +61,10 @@ export const MainNavMobileMenu = () => {
               className="w-full px-docs_1.5 h-3/4 flex flex-col justify-center"
             >
               {selectedMenus.length === 0 && (
-                <MainNavMobileMainMenu setSelectedMenus={setSelectedMenus} />
+                <MainNavMobileMainMenu
+                  setSelectedMenus={setSelectedMenus}
+                  onOpenLink={handleOpenLink}
+                />
               )}
               {selectedMenus.length > 0 && (
                 <>
@@ -82,6 +89,7 @@ export const MainNavMobileMenu = () => {
                   <MainNavMobileSubMenu
                     {...selectedMenus[selectedMenus.length - 1]}
                     setSelectedMenus={setSelectedMenus}
+                    onOpenLink={handleOpenLink}
                   />
                 </>
               )}