Inital attempt

assets/page/toc.js

@@ -1,4 +1,4 @@
-(function () {
+document.addEventListener("DOMContentLoaded", function () {
   var content = document.querySelector("main");
   if (!content) return;
 
@@ -28,32 +28,24 @@
   });
   nav.appendChild(list);
 
-  var toggle = document.createElement("button");
-  toggle.type = "button";
-  toggle.className = "panel-toggle";
-  toggle.textContent = "Contents";
-  toggle.setAttribute("aria-expanded", "false");
-  toggle.addEventListener("click", function () {
+  var rail = document.querySelector(".right-rail");
+  if (!rail) {
+    rail = document.createElement("div");
+    rail.className = "right-rail";
+    document.body.appendChild(rail);
+  }
+  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");
-    toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    fab.setAttribute("aria-expanded", open ? "true" : "false");
   });
-
-  var main = document.querySelector("main");
-  if (main) {
-    main.parentNode.insertBefore(toggle, main);
-    main.parentNode.insertBefore(nav, main);
-  } else {
-    document.body.appendChild(toggle);
-    document.body.appendChild(nav);
-  }
-
-  var pageHeader = document.querySelector("header");
-  function updateTop() {
-    if (!pageHeader || getComputedStyle(nav).position !== "fixed") return;
-    var rect = pageHeader.getBoundingClientRect();
-    nav.style.top = Math.max(8, rect.bottom + 8) + "px";
-  }
-  window.addEventListener("scroll", updateTop, { passive: true });
-  window.addEventListener("resize", updateTop);
-  updateTop();
-})();
+  document.body.appendChild(fab);
+});