Replace bootstrap burger menu with a CSS based one

This removes our dependency on the bootstrap javascript and along with
it also the jquery dependency. Instead we use a pure CSS based dropdown
menu, and a small snippet of custom javascript is used to maintain the
aria- tag information.

Reviewed by Dave Page and Chris Ellis

Author: mhagander

README.rst

@@ -46,8 +46,6 @@ Django is released under its `BSD Licence <https://github.com/django/django/blob
 Bootstrap is released under the `MIT Licence <https://github.com/twbs/bootstrap/blob/master/LICENSE>`_.
 and includes the following software as well:
 
-- jQuery under the `MIT Licence <https://jquery.org/license/>`_
-
 Font Awesome has a `combination of licences <https://fontawesome.com/license>`_:
 
 The code of Font Awesome is released under the `MIT Licence <https://opensource.org/licenses/MIT>`_.

media/css/main.css

@@ -825,6 +825,18 @@ ul.actions {
   transition: all 0.3s;
 }
 
+/* Burger menu */
+input#navbar-toggler {
+  display: none;
+}
+#pgNavbar {
+  display: none;
+}
+#navbar-toggler:checked ~ #pgNavbar {
+  display: block;
+}
+
+
 /* #SIDEBAR UL STYLING */
 
 #pgSideNav {

media/js/jquery-3.4.1.slim.min.js

@@ -1,3 +1,16 @@
+/*
+ * Keyboard-accessible nav toggle
+ */
+document.getElementById('navbar-toggler-label').addEventListener('keydown', (e) => {
+    if (e.key == ' ') {
+        document.getElementById('navbar-toggler').checked ^= true;
+        e.preventDefault();
+    }
+});
+document.getElementById('navbar-toggler').addEventListener('change', (e) => {
+    document.getElementById('navbar-toggler').setAttribute('aria-expanded', document.getElementById('navbar-toggler').checked);
+});
+
 /*
  * Initialize google tag manager for analytics integration
  */

media/js/main.js

@@ -41,10 +41,9 @@
             <a class="navbar-brand p-0" href="/">
               <img class="logo" src="/media/img/about/press/elephant.png" alt="PostgreSQL Elephant Logo">
             </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#pgNavbar" aria-controls="pgNavbar" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="pgNavbar">
+            <input type="checkbox" id="navbar-toggler" aria-controls="pgNavbar" aria-expanded="false" aria-label="Toggle navigation">
+            <label for="navbar-toggler" id="navbar-toggler-label" class="navbar-toggler" tabindex="0"><span class="navbar-toggler-icon"></span></label>
+            <div class="navbar-collapse" id="pgNavbar">
               <ul class="navbar-nav mr-auto">
                 <li class="nav-item p-2"><a href="/" title="Home">Home</a></li>
                 <li class="nav-item p-2"><a href="/about/" title="About">About</a></li>
@@ -87,8 +86,6 @@
         <p>Copyright &copy; 1996-{% now "Y" %} The PostgreSQL Global Development Group</p>
       </div>
     </footer>
-    <script src="/media/js/jquery-3.4.1.slim.min.js"></script>
-    <script src="/media/js/bootstrap-4.4.1.min.js"></script>
     <script src="/media/js/main.js?{{gitrev}}"></script>
 {%block extrascript%}{%endblock%}
   </body>

templates/base/base.html

@@ -44,10 +44,9 @@
             <a class="navbar-brand p-0" href="/">
               <img class="logo" src="/media/img/about/press/elephant.png" alt="PostgreSQL Elephant Logo">
             </a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#pgNavbar" aria-controls="pgNavbar" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="pgNavbar">
+            <input type="checkbox" id="navbar-toggler" aria-controls="pgNavbar" aria-expanded="false" aria-label="Toggle navigation">
+            <label for="navbar-toggler" id="navbar-toggler-label" class="navbar-toggler" tabindex="0"><span class="navbar-toggler-icon"></span></label>
+            <div class="navbar-collapse" id="pgNavbar">
               <ul class="navbar-nav mr-auto">
                 <li class="nav-item p-2"><a href="/" title="Home">Home</a></li>
                 <li class="nav-item p-2"><a href="/about/" title="About">About</a></li>
@@ -178,8 +177,6 @@ <h2>Submit correction</h2>
         <p>Copyright &copy; 1996-{% now "Y" %} The PostgreSQL Global Development Group</p>
       </div>
     </footer>
-    <script src="/media/js/jquery-3.4.1.slim.min.js"></script>
-    <script src="/media/js/bootstrap-4.4.1.min.js"></script>
     <script src="/media/js/main.js?{{gitrev}}"></script>
   </body>
 </html>