fix #800 - add ui js for menu toggle

site/src/theme/Layout.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Head from '@docusaurus/Head';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -13,6 +13,8 @@ import '../../../build/grids-responsive-min.css';
 import '../../static/css/main-grid.css';
 import '../../static/css/main.css';
 
+let jsLoaded = false;
+
 function Layout(props) {
   const {siteConfig = {}} = useDocusaurusContext();
   const {
@@ -41,6 +43,17 @@ function Layout(props) {
   }
 
   const faviconUrl = useBaseUrl(favicon);
+  
+  // load external menu js dynamically
+  useEffect(() => {
+      if (!jsLoaded) {
+          const script = document.createElement('script');
+          script.type = 'text/javascript';
+          script.src = '/js/ui.js';
+          document.head.appendChild(script);
+          jsLoaded = true;
+      }
+  });
 
   return (
       <>

site/static/js/ui.js

@@ -10,7 +10,7 @@
             length = classes.length,
             i = 0;
 
-        for(; i < length; i++) {
+        for (; i < length; i++) {
           if (classes[i] === className) {
             classes.splice(i, 1);
             break;
@@ -25,6 +25,7 @@
     }
 
     function toggleAll(e) {
+        console.log('toggle', e.target);
         var active = 'active';
 
         e.preventDefault();
@@ -32,15 +33,17 @@
         toggleClass(menu, active);
         toggleClass(menuLink, active);
     }
-
-    menuLink.onclick = function (e) {
-        toggleAll(e);
-    };
-
-    content.onclick = function(e) {
-        if (menu.className.indexOf('active') !== -1) {
-            toggleAll(e);
+    
+    function handleEvent(e) {
+        if (e.target.id === menuLink.id) {
+            return toggleAll(e);
         }
-    };
+        
+        if (menu.className.indexOf('active') !== -1) {
+            return toggleAll(e);
+        }
+    }
+    
+    document.addEventListener('click', handleEvent);
 
 }(this, this.document));