Add hamburger button JavaScript

A new JavaScript file base.js is introduced and included in the base template so the hamburger button will work on every page.
archlinux · Nov 4, 2019 · d36434f · d36434f
1 parent 376ba50
commit d36434f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/sitestatic/base.js b/sitestatic/base.js
@@ -0,0 +1,16 @@
+"use strict";
+
+document.addEventListener('DOMContentLoaded', function () {
+    var hamburger = document.getElementById('hamburger');
+    var hamburgerState = false;
+
+    hamburger.onclick = function () {
+        hamburgerState = !hamburgerState;
+
+        if (hamburgerState) {
+            hamburger.classList.add('open');
+        } else {
+            hamburger.classList.remove('open');
+        }
+    };
+}, false);
diff --git a/templates/base.html b/templates/base.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Arch Linux{% endblock %}</title>
     <link rel="stylesheet" type="text/css" href="{% static "archweb.css" %}" media="screen" />
+    <script src="{% static "base.js" %}"></script>
     <link rel="icon" type="image/x-icon" href="{% static "favicon.ico" %}" />
     <link rel="shortcut icon" type="image/x-icon" href="{% static "favicon.ico" %}" />
     <link rel="apple-touch-icon" href="{% static "logos/apple-touch-icon-57x57.png" %}" />