Make categories collapsible

main.js

@@ -26,8 +26,10 @@ const map = new Map({
 for (let category of layerCategories) {
   const catDiv = document.createElement("div");
   catDiv.innerHTML = `
-    <h3>${category.name}</h3>
+    <details open>
+    <summary>${category.name}</summary>
     <ul></ul>
+    </details>
   `;
   for (let layer of category.layers) {
     const li = document.createElement("li");

style.css

@@ -16,7 +16,6 @@
 aside {
   width: min(max(200px, 20%), 400px);
   margin-left: max(min(-200px, -20%), -400px);
-  padding: 0 1em;
   transition: 0.25s;
 }
 
@@ -41,6 +40,17 @@ aside .close {
   display: none;
 }
 
+aside details {
+  margin-bottom: 2em;
+  cursor: pointer;
+}
+
+aside summary {
+  font-size: 1.3em;
+  margin: .5em 0;
+  font-weight: bold;
+}
+
 @media (max-width: 400px) {
   .nav-open #map {
     left: 100%;