fix: submenu in the mobile navigation fails to expand properly #334

Author: shuashuai

src/css/custom.scss

@@ -58,12 +58,12 @@ $primary: #0033ff;
   opacity: 0.75;
 }
 
-.navbar__link.bi-translate {
+.bi-translate {
   svg {
     display: none;
   }
 }
-.navbar__link.bi::before {
+.bi-translate::before {
   font-size: 24px;
   margin-right: 0.25rem;;
 }

src/theme/NavbarItem/NavbarNavLink.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
@@ -40,11 +40,18 @@ export default function NavbarNavLink({
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
 
-  const clickLink = (e) => {
-     if (e.target?.lang) {
-       localStorage.setItem('_lang_user_', e.target.lang);
-     }
-  }
+  useEffect(() => {
+    const handleClick = (event) => {
+      if (event.target.tagName === 'A' && event.target.lang) {
+        localStorage.setItem('_lang_user_', event.target.lang);
+      }
+    };
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [])
 
   // Link content is set through html XOR label
   const linkContentProps = html
@@ -68,7 +75,6 @@ export default function NavbarNavLink({
         href={prependBaseUrlToHref ? normalizedHref : href}
         {...props}
         {...linkContentProps}
-        onClick={clickLink}
       />
     );
   }
@@ -85,7 +91,6 @@ export default function NavbarNavLink({
       })}
       {...props}
       {...linkContentProps}
-      onClick={clickLink}
     />
   );
 }