doc: Implement responsive, toggleable sidebar

Below a screen width of 768px (Bootstrap's "medium" breakpoint)
the sidebar will collapse to a small strip. Hovering the sidebar will
fully reveal it until the mouse leaves it.
Clicking the sidebar will reveal it until another part of the page is
clicked.

docs/ldoc.css

@@ -69,14 +69,34 @@ dd > code {
 }
 
 #navigation {
-    float: left;
+    --sidebar-width: 14em;
+    --sidebar-toggle-width: 24px;
+
     background-color: white;
     border-right: 1px solid #d3dbec;
     border-bottom: 1px solid #d3dbec;
 
-    width: 14em;
-    vertical-align: top;
+    width: var(--sidebar-width);
     overflow: visible;
+
+    margin-left: calc(-1 * var(--sidebar-width) + var(--sidebar-toggle-width));
+    transition: margin-left 0.2s ease-out;
+}
+
+#navigation.open {
+    margin-left: 0;
+}
+
+@media (hover: hover) {
+    #navigation:hover {
+        margin-left: 0;
+    }
+}
+
+@media all and (min-width: 768px) {
+    #navigation {
+        margin-left: 0;
+    }
 }
 
 #navigation br {
@@ -103,6 +123,10 @@ dd > code {
     margin-bottom: 0px;
 }
 
+#content {
+    overflow: hidden;
+}
+
 #content h1 {
     background-color: #2c3e67;
     color: white;
@@ -280,12 +304,17 @@ table th, table td {
 
 #about {
     padding: 15px;
-    padding-left: 16em;
     background-color: white;
     border-top: 1px solid #d3dbec;
     border-bottom: 1px solid #d3dbec;
 }
 
+@media all and (min-width: 768px) {
+    #about {
+        padding-left: calc(14em + 15px);
+    }
+}
+
 table.module_list, table.function_list {
     border-width: 1px;
     border-style: solid;

docs/ldoc.ltp

@@ -113,7 +113,6 @@
 <!-- Menu -->
 
 <div id="navigation">
-<br/>
 <h1>$(ldoc.project)</h1>
 
 # if not ldoc.single and module then -- reference back to project index
@@ -532,5 +531,35 @@
 <i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc $(ldoc.version)</a></i>
 </div> <!-- id="about" -->
 </div> <!-- id="container" -->
+
+<script defer type="text/javascript">
+    const $nav = document.querySelector("#navigation");
+
+    // When clicking the sidebar, open it
+    $nav.addEventListener("click", function(ev) {
+        if (document.body.clientWidth >= 768) {
+            return;
+        }
+
+        const target = $nav;
+        if (!target.classList.contains("open")) {
+            target.classList.add("open");
+            ev.stopPropagation();
+        }
+    });
+
+    // When clicking anywhere else than the sidebar, close it
+    document.querySelector("body").addEventListener("click", function(ev) {
+        if (document.body.clientWidth >= 768 || ev.target.contains($nav)) {
+            return;
+        }
+
+        const target = $nav;
+        if (target.classList.contains("open")) {
+            target.classList.remove("open");
+        }
+    });
+</script>
+
 </body>
 </html>