From 222063399a79f5d6177a7cb0cfa0f23db1360c5a Mon Sep 17 00:00:00 2001
From: xuri <xuri.me@gmail.com>
Date: Sun, 24 Jan 2021 13:57:18 +0800
Subject: [PATCH] enable toggle menu and fix missing footer in 404 page

---
 handlers/error.go          |  2 +-
 templates/404.html         | 28 +++++++++++++++++++++++++---
 templates/about.html       | 26 ++++++++++++++++++++++++--
 templates/high_scores.html | 26 ++++++++++++++++++++++++--
 templates/home.html        | 25 ++++++++++++++++++++++---
 templates/report.html      | 23 +++++++++++++++++++++--
 templates/supporters.html  | 26 ++++++++++++++++++++++++--
 7 files changed, 141 insertions(+), 15 deletions(-)

diff --git a/handlers/error.go b/handlers/error.go
index c3434d4..7e5887b 100644
--- a/handlers/error.go
+++ b/handlers/error.go
@@ -8,7 +8,7 @@ import (
 func errorHandler(w http.ResponseWriter, r *http.Request, status int) {
 	w.WriteHeader(status)
 	if status == http.StatusNotFound {
-		t := template.Must(template.New("404.html").ParseFiles("templates/404.html", "templates/footer.html"))
+		t := template.Must(template.New("404.html").Delims("[[", "]]").ParseFiles("templates/404.html", "templates/footer.html"))
 		t.Execute(w, nil)
 	}
 }
diff --git a/templates/404.html b/templates/404.html
index e9fdbf7..0ad50ad 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -33,21 +33,21 @@
           </div>
 
           <!-- Hamburger menu (on mobile) -->
-          <span class="header-toggle">
+          <span class="header-toggle" data-target="header-menu">
             <span></span>
             <span></span>
             <span></span>
           </span>
 
           <!-- Right side -->
-          <div class="header-right header-menu">
+          <div class="header-right header-menu" id="header-menu">
             <span class="header-item">
               <a href="/high_scores">High Scores</a>
             </span>
             <span class="header-item">
               <a href="https://github.com/gojp/goreportcard">GitHub</a>
             </span>
-            <span class="header-item is-active">
+            <span class="header-item">
               <a href="/about">About</a>
             </span>
           </div>
@@ -80,5 +80,27 @@
     @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
     @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
     </style>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script>
+      $(function () {
+        // Get all "header-toggle" elements
+        var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+        // Check if there are any navbar burgers
+        if ($navbarBurgers.length > 0) {
+          // Add a click event on each of them
+          $navbarBurgers.forEach(function ($el) {
+            $el.addEventListener('click', function () {
+              // Get the target from the "data-target" attribute
+              var target = $el.dataset.target;
+              var $target = document.getElementById(target);
+              // Toggle the class on both the "header-toggle" and the "header-menu"
+              $el.classList.toggle('is-active');
+              $target.classList.toggle('is-active');
+
+            });
+          });
+        }
+      })
+    </script>
 </body>
 </html>
diff --git a/templates/about.html b/templates/about.html
index 84cc7f9..2388835 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -33,14 +33,14 @@
           </div>
 
           <!-- Hamburger menu (on mobile) -->
-          <span class="header-toggle">
+          <span class="header-toggle" data-target="header-menu">
             <span></span>
             <span></span>
             <span></span>
           </span>
 
           <!-- Right side -->
-          <div class="header-right header-menu">
+          <div class="header-right header-menu" id="header-menu">
             <span class="header-item">
               <a href="/high_scores">High Scores</a>
             </span>
@@ -67,5 +67,27 @@
         </div>
     </section>
     [[ template "footer" . ]]
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script>
+      $(function () {
+        // Get all "header-toggle" elements
+        var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+        // Check if there are any navbar burgers
+        if ($navbarBurgers.length > 0) {
+          // Add a click event on each of them
+          $navbarBurgers.forEach(function ($el) {
+            $el.addEventListener('click', function () {
+              // Get the target from the "data-target" attribute
+              var target = $el.dataset.target;
+              var $target = document.getElementById(target);
+              // Toggle the class on both the "header-toggle" and the "header-menu"
+              $el.classList.toggle('is-active');
+              $target.classList.toggle('is-active');
+
+            });
+          });
+        }
+      })
+    </script>
 </body>
 </html>
diff --git a/templates/high_scores.html b/templates/high_scores.html
index c581cda..016de85 100644
--- a/templates/high_scores.html
+++ b/templates/high_scores.html
@@ -33,14 +33,14 @@
           </div>
 
           <!-- Hamburger menu (on mobile) -->
-          <span class="header-toggle">
+          <span class="header-toggle" data-target="header-menu">
             <span></span>
             <span></span>
             <span></span>
           </span>
 
           <!-- Right side -->
-          <div class="header-right header-menu">
+          <div class="header-right header-menu" id="header-menu">
             <span class="header-item is-active">
               <a href="/high_scores">High Scores</a>
             </span>
@@ -86,5 +86,27 @@
         </div>
     </section>
     [[ template "footer" . ]]
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script>
+      $(function () {
+        // Get all "header-toggle" elements
+        var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+        // Check if there are any navbar burgers
+        if ($navbarBurgers.length > 0) {
+          // Add a click event on each of them
+          $navbarBurgers.forEach(function ($el) {
+            $el.addEventListener('click', function () {
+              // Get the target from the "data-target" attribute
+              var target = $el.dataset.target;
+              var $target = document.getElementById(target);
+              // Toggle the class on both the "header-toggle" and the "header-menu"
+              $el.classList.toggle('is-active');
+              $target.classList.toggle('is-active');
+
+            });
+          });
+        }
+      })
+    </script>
 </body>
 </html>
diff --git a/templates/home.html b/templates/home.html
index ac82d92..1c43e9e 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -31,14 +31,14 @@
         </div>
 
         <!-- Hamburger menu (on mobile) -->
-        <span class="header-toggle">
+        <span class="header-toggle" data-target="header-menu">
           <span></span>
           <span></span>
           <span></span>
         </span>
 
         <!-- Right side -->
-        <div class="header-right header-menu">
+        <div class="header-right header-menu" id="header-menu">
           <span class="header-item">
             <a href="/high_scores">High Scores</a>
           </span>
@@ -103,7 +103,7 @@
                     <tbody>
                         [[ range .Recent ]]
                         <tr>
-                            <td class="table-link"><a href="/report/[[ . ]]">[[ . ]]</td>
+                            <td class="table-link"><a href="/report/[[ . ]]">[[ . ]]</a></td>
                         </tr>
                         [[ end ]]
                     </tbody>
@@ -204,6 +204,25 @@
 
       // handle form submission
       $("form#check_form").submit(loadData);
+
+      // Get all "header-toggle" elements
+      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+      // Check if there are any navbar burgers
+      if ($navbarBurgers.length > 0) {
+        // Add a click event on each of them
+        $navbarBurgers.forEach(function ($el) {
+          $el.addEventListener('click', function () {
+            // Get the target from the "data-target" attribute
+            var target = $el.dataset.target;
+            var $target = document.getElementById(target);
+            // Toggle the class on both the "header-toggle" and the "header-menu"
+            $el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+
+          });
+        });
+      }
+
     });
   </script>
 </body>
diff --git a/templates/report.html b/templates/report.html
index 8b65b1a..4cbb86b 100644
--- a/templates/report.html
+++ b/templates/report.html
@@ -37,14 +37,14 @@
         </div>
 
         <!-- Hamburger menu (on mobile) -->
-        <span class="header-toggle">
+        <span class="header-toggle" data-target="header-menu">
           <span></span>
           <span></span>
           <span></span>
         </span>
 
         <!-- Right side -->
-        <div class="header-right header-menu">
+        <div class="header-right header-menu" id="header-menu">
           <span class="header-item">
             <a href="/high_scores">High Scores</a>
           </span>
@@ -346,6 +346,25 @@
               $('nav.results').removeClass('stickytop');
           }
       });
+
+      // Get all "header-toggle" elements
+      var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+      // Check if there are any navbar burgers
+      if ($navbarBurgers.length > 0) {
+        // Add a click event on each of them
+        $navbarBurgers.forEach(function ($el) {
+          $el.addEventListener('click', function () {
+            // Get the target from the "data-target" attribute
+            var target = $el.dataset.target;
+            var $target = document.getElementById(target);
+            // Toggle the class on both the "header-toggle" and the "header-menu"
+            $el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+
+          });
+        });
+      }
+
     });
   </script>
 </body>
diff --git a/templates/supporters.html b/templates/supporters.html
index 01b3574..93c5e58 100644
--- a/templates/supporters.html
+++ b/templates/supporters.html
@@ -33,14 +33,14 @@
           </div>
 
           <!-- Hamburger menu (on mobile) -->
-          <span class="header-toggle">
+          <span class="header-toggle" data-target="header-menu">
             <span></span>
             <span></span>
             <span></span>
           </span>
 
           <!-- Right side -->
-          <div class="header-right header-menu">
+         <div class="header-right header-menu" id="header-menu">
             <span class="header-item">
               <a href="/high_scores">High Scores</a>
             </span>
@@ -66,5 +66,27 @@
         </div>
     </section>
     [[ template "footer" . ]]
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script>
+      $(function () {
+        // Get all "header-toggle" elements
+        var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.header-toggle'), 0);
+        // Check if there are any navbar burgers
+        if ($navbarBurgers.length > 0) {
+          // Add a click event on each of them
+          $navbarBurgers.forEach(function ($el) {
+            $el.addEventListener('click', function () {
+              // Get the target from the "data-target" attribute
+              var target = $el.dataset.target;
+              var $target = document.getElementById(target);
+              // Toggle the class on both the "header-toggle" and the "header-menu"
+              $el.classList.toggle('is-active');
+              $target.classList.toggle('is-active');
+
+            });
+          });
+        }
+      })
+    </script>
 </body>
 </html>