Update sidebar.

It now is an overlay on mobile

assets/diary/calendar.js

@@ -1,23 +1,5 @@
 (function () {
   var cal = document.querySelector(".diary-cal");
   if (!cal) return;
-
   cal.querySelectorAll(".dropdown > button").forEach(wireDropdown);
-
-  var toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "panel-toggle";
-  toggle.textContent = "Kalender";
-  toggle.setAttribute("aria-expanded", "false");
-  toggle.addEventListener("click", function () {
-    var open = cal.classList.toggle("is-open");
-    toggle.setAttribute("aria-expanded", open ? "true" : "false");
-  });
-
-  var main = document.querySelector("main");
-  if (!main) return;
-  main.parentNode.insertBefore(toggle, main);
-  if (window.matchMedia("(max-width: 1100px)").matches) {
-    main.parentNode.insertBefore(cal, main);
-  }
 })();

assets/page/actions.js

@@ -124,28 +124,3 @@ function deletePage() {
     });
 }
 
-document.addEventListener('DOMContentLoaded', function () {
-    var panel = document.querySelector('.actions');
-    if (!panel) return;
-
-    var toggle = document.createElement('button');
-    toggle.type = 'button';
-    toggle.className = 'panel-toggle';
-    toggle.textContent = 'Actions';
-    toggle.setAttribute('aria-expanded', 'false');
-    toggle.addEventListener('click', function () {
-        var open = panel.classList.toggle('is-open');
-        toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
-    });
-
-    var main = document.querySelector('main');
-    if (!main) return;
-    // Insert at the top of main's parent (right after the header) so the
-    // ACTIONS toggle sits above any toggles other panels may have added.
-    var header = document.querySelector('header');
-    var anchor = header ? header.nextSibling : main.parentNode.firstChild;
-    main.parentNode.insertBefore(toggle, anchor);
-    if (window.matchMedia('(max-width: 1100px)').matches) {
-        main.parentNode.insertBefore(panel, toggle.nextSibling);
-    }
-});

assets/page/main.html

@@ -32,6 +32,7 @@
 {{if .Content}}
 <script src="/_/page/sections.js"></script>
 {{end}}
+<script src="/_/page/sidebar-fab.js"></script>
 {{end}}
 
 {{define "sidebar"}}{{if .CanEdit}}<nav class="actions">

assets/page/sidebar-fab.js

@@ -0,0 +1,23 @@
+document.addEventListener("DOMContentLoaded", function () {
+  var aside = document.querySelector("aside.sidebar");
+  if (!aside || !aside.children.length) return;
+
+  var fab = document.createElement("button");
+  fab.type = "button";
+  fab.className = "btn btn-fab fab";
+  fab.title = "Menu";
+  fab.setAttribute("aria-label", "Menu");
+  fab.setAttribute("aria-expanded", "false");
+  fab.textContent = "≡";
+  fab.addEventListener("click", function () {
+    var open = aside.classList.toggle("is-open");
+    fab.setAttribute("aria-expanded", open ? "true" : "false");
+  });
+  aside.addEventListener("click", function (e) {
+    if (e.target.tagName === "A") {
+      aside.classList.remove("is-open");
+      fab.setAttribute("aria-expanded", "false");
+    }
+  });
+  document.body.appendChild(fab);
+});

assets/page/toc.js

@@ -30,23 +30,4 @@ document.addEventListener("DOMContentLoaded", function () {
 
   var rail = document.querySelector("aside.sidebar");
   rail.appendChild(nav);
-
-  var fab = document.createElement("button");
-  fab.type = "button";
-  fab.className = "btn btn-fab fab";
-  fab.title = "Contents";
-  fab.setAttribute("aria-label", "Contents");
-  fab.setAttribute("aria-expanded", "false");
-  fab.textContent = "≡";
-  fab.addEventListener("click", function () {
-    var open = nav.classList.toggle("is-open");
-    fab.setAttribute("aria-expanded", open ? "true" : "false");
-  });
-  nav.addEventListener("click", function (e) {
-    if (e.target.tagName === "A") {
-      nav.classList.remove("is-open");
-      fab.setAttribute("aria-expanded", "false");
-    }
-  });
-  document.body.appendChild(fab);
 });

assets/style.css

@@ -652,10 +652,6 @@ aside.sidebar:empty {
     padding-left: 1.6rem;
 }
 
-.panel-toggle {
-    display: none;
-}
-
 /* === Modal === */
 .modal-backdrop {
     position: fixed;
@@ -884,55 +880,9 @@ aside.sidebar:empty {
     .page-wrap {
         grid-template-columns: 1fr;
     }
+    /* Sidebar on mobile is a floating overlay toggled by the FAB. The aside
+       itself is the scroll container; its children render at natural height. */
     .sidebar {
-        display: contents;
-        position: static;
-        max-height: none;
-        overflow: visible;
-    }
-    button.fab {
-        display: inline-flex;
-    }
-    .panel-toggle {
-        display: block;
-        background: none;
-        border: 1px solid var(--secondary);
-        color: var(--text);
-        font: inherit;
-        font-size: 0.8rem;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        cursor: pointer;
-        padding: 0.4rem 0.75rem;
-        margin: 1rem auto;
-        width: calc(100% - 2rem);
-        max-width: 860px;
-    }
-    .panel-toggle::before {
-        content: "▸ ";
-        color: var(--secondary);
-    }
-    .panel-toggle[aria-expanded="true"]::before {
-        content: "▾ ";
-    }
-    .actions,
-    .diary-cal {
-        position: static;
-        display: none;
-        width: calc(100% - 2rem);
-        max-width: 860px;
-        margin: 0 auto 1rem;
-        max-height: none;
-    }
-    .actions.is-open {
-        display: flex;
-    }
-    .diary-cal.is-open {
-        display: block;
-    }
-    /* TOC on mobile is a floating overlay toggled by the FAB. */
-    .sidebar .toc,
-    .toc {
         position: fixed;
         bottom: 5rem;
         right: 1rem;
@@ -945,9 +895,11 @@ aside.sidebar:empty {
         display: none;
         z-index: 60;
     }
-    .sidebar .toc.is-open,
+    .sidebar.is-open {
-    .toc.is-open {
+        display: flex;
-        display: block;
+    }
+    button.fab {
+        display: inline-flex;
     }
 }
 
@@ -962,9 +914,7 @@ aside.sidebar:empty {
     textarea {
         min-height: 50vh;
     }
-    .panel-toggle,
+    .sidebar {
-    .toc.is-open,
-    .diary-cal.is-open {
         width: calc(100% - 1.5rem);
     }
     .modal-backdrop {