use button instead of span for dropdowns

Author: pfitzseb

assets/default/multidoc.css

@@ -64,6 +64,8 @@ html {
     cursor: pointer;
     color: #ccc;
     text-transform: uppercase;
+    border: none;
+    background: none;
 }
 
 #multi-page-nav .dropdown-label::after {
@@ -110,6 +112,7 @@ html {
     border-radius: 0;
     border: none;
     flex-wrap: wrap;
+    margin-top: 0;
 }
 
 #multi-page-nav .nav-mega-dropdown-container .nav-mega-column {

assets/multidoc_injector.js

@@ -16,15 +16,12 @@ require(["jquery"], function ($) {
           .classList.toggle("hidden-on-mobile");
       });
       document.body.addEventListener("click", function (ev) {
-        console.log(ev)
         if (!ev.target.matches(".nav-dropdown-container")) {
-          console.log("closing")
           Array.prototype.forEach.call(document.getElementsByClassName("dropdown-label"), function (el) {
             el.parentElement.classList.remove("nav-expanded")
           });
         }
         if (ev.target.matches(".dropdown-label")) {
-          console.log("opening")
           ev.target.parentElement.classList.add("nav-expanded")
         }
       })

src/renderers.jl

@@ -32,7 +32,7 @@ end
 function render(doc::DropdownNav, dir, thispagepath, prettyurls)
     return @htl """
     <div class="nav-dropown">
-        <span class="nav-item dropdown-label">$(doc.name)</span>
+        <button class="nav-item dropdown-label">$(doc.name)</button>
         <ul class="nav-dropdown-container">
             $([render(doc, dir, thispagepath, prettyurls) for doc in doc.children])
         </ul>
@@ -43,7 +43,7 @@ end
 function render(doc::MegaDropdownNav, dir, thispagepath, prettyurls)
     return @htl """
     <div class="nav-dropown">
-        <span class="nav-item dropdown-label">$(doc.name)</span>
+        <button class="nav-item dropdown-label">$(doc.name)</button>
         <div class="nav-dropdown-container nav-mega-dropdown-container">
             $([render(doc, dir, thispagepath, prettyurls) for doc in doc.columns])
         </div>