update borders

assets/templates/sidebar.njk

@@ -0,0 +1,35 @@
+{# Only the /:page routes have one. The element is always there, hidden on the
+   others, so that a boosted link in either direction has something to swap
+   out of band, and so a history restore can ask for the right one. #}
+<div class="sidebar-shell" id="sidebar"
+     {%- if not sidebar %} hidden{% endif %}
+     {%- if oob %} hx-swap-oob="true"{% endif %}
+     hx-get="api/reference"
+     {# htmx keeps an event only when the filter returns true exactly, so a
+        string is discarded. #}
+     hx-trigger="{% if reference and not settled %}load[!!location.hash], {% endif %}htmx:historyRestore from:body"
+     hx-target="this" hx-swap="outerHTML">
+  {# Always open: beside the text on a wide screen, and hidden by the
+     stylesheet on a phone until the button below opens it as a modal. Closing
+     the modal opens it again the plain way, so it is there after a resize.
+     Its box has no padding, so a click on the dialog itself is the backdrop.
+     autofocus has opening focus the dialog itself; otherwise it goes to the
+     first select, and a phone opens the select's picker with it. #}
+  <dialog class="sidebar" open autofocus aria-label="Contents"
+          hx-on:click="if (event.target === this && this.matches(':modal')) this.close();"
+          hx-on:close="if (!this.open) this.show();">
+    <div class="sidebar-body">
+{%- if reference %}
+{% include "reference.njk" %}
+{%- endif %}
+    </div>
+    {# Takes the place of the frame's last corner on a phone, right where the
+       button that opened it was. #}
+    <button class="sidebar-fab sidebar-close" type="button" aria-label="Close"
+            hx-on:click="this.closest('dialog').close();"></button>
+  </dialog>
+  <button class="sidebar-fab sidebar-open" type="button" aria-label="Contents"
+          hx-on:click="var dialog = this.previousElementSibling;
+                       dialog.close();
+                       dialog.showModal();"></button>
+</div>