docs: fix mobile menu not closing when clicking a link (#13618)

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>
             )}

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>
             )}

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}
                   />
                 </>
               )}