From 4c01e2c5edcd2b40ef218ddfe1f145661fad9615 Mon Sep 17 00:00:00 2001
From: redonkulus <seth@bertalotto.net>
Date: Wed, 20 Jan 2021 11:35:15 -0800
Subject: [PATCH] fix #809 - remove prevent default to follow links

---
 site/static/js/ui.js                     | 39 ++++++++++++++----------
 site/static/layouts/side-menu/index.html |  8 ++---
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/site/static/js/ui.js b/site/static/js/ui.js
index 9614e76..628284b 100644
--- a/site/static/js/ui.js
+++ b/site/static/js/ui.js
@@ -1,13 +1,19 @@
 (function (window, document) {
 
-    var layout   = document.getElementById('layout'),
-        menu     = document.getElementById('menu'),
-        menuLink = document.getElementById('menuLink');
+    // we fetch the elements each time because docusaurus removes the previous
+    // element references on page navigation
+    function getElements() {
+        return {
+            layout: document.getElementById('layout'),
+            menu: document.getElementById('menu'),
+            menuLink: document.getElementById('menuLink')
+        };
+    }
 
     function toggleClass(element, className) {
-        var classes = element.className.split(/\s+/),
-            length = classes.length,
-            i = 0;
+        var classes = element.className.split(/\s+/);
+        var length = classes.length;
+        var i = 0;
 
         for (; i < length; i++) {
             if (classes[i] === className) {
@@ -23,22 +29,23 @@
         element.className = classes.join(' ');
     }
 
-    function toggleAll(e) {
+    function toggleAll() {
         var active = 'active';
+        var elements = getElements();
 
-        e.preventDefault();
-        toggleClass(layout, active);
-        toggleClass(menu, active);
-        toggleClass(menuLink, active);
+        toggleClass(elements.layout, active);
+        toggleClass(elements.menu, active);
+        toggleClass(elements.menuLink, active);
     }
     
     function handleEvent(e) {
-        if (e.target.id === menuLink.id) {
-            return toggleAll(e);
-        }
+        var elements = getElements();
         
-        if (menu.className.indexOf('active') !== -1) {
-            return toggleAll(e);
+        if (e.target.id === elements.menuLink.id) {
+            toggleAll();
+            e.preventDefault();
+        } else if (elements.menu.className.indexOf('active') !== -1) {
+            toggleAll();
         }
     }
     
diff --git a/site/static/layouts/side-menu/index.html b/site/static/layouts/side-menu/index.html
index 2e04772..cf3735c 100644
--- a/site/static/layouts/side-menu/index.html
+++ b/site/static/layouts/side-menu/index.html
@@ -19,17 +19,17 @@
 
     <div id="menu">
         <div class="pure-menu">
-            <a class="pure-menu-heading" href="#">Company</a>
+            <a class="pure-menu-heading" href="#company">Company</a>
 
             <ul class="pure-menu-list">
-                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
-                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+                <li class="pure-menu-item"><a href="#home" class="pure-menu-link">Home</a></li>
+                <li class="pure-menu-item"><a href="#about" class="pure-menu-link">About</a></li>
 
                 <li class="pure-menu-item menu-item-divided pure-menu-selected">
                     <a href="#" class="pure-menu-link">Services</a>
                 </li>
 
-                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
+                <li class="pure-menu-item"><a href="#contact" class="pure-menu-link">Contact</a></li>
             </ul>
         </div>
     </div>