update borders

assets/templates/base.njk

@@ -21,9 +21,23 @@
 <body class="{% block body_class %}{% endblock %}"
       hx-boost="true" hx-target="#content" hx-swap="innerHTML show:window:top">
 
+{% include "sidebar.njk" %}
+
 <main id="content" hx-history-elt>
 {% block content %}{% endblock %}
 </main>
 
+<script>
+// The sidebar, and on a phone its button, fade out once the page leaves the
+// top, so they are out of the way while reading; the stylesheet brings the
+// sidebar back under the pointer.
+(function () {
+  var root = document.documentElement;
+  function update() { root.classList.toggle('scrolled', window.scrollY > 0); }
+  addEventListener('scroll', update, { passive: true });
+  update();
+})();
+</script>
+
 </body>
 </html>

assets/templates/reference.njk

@@ -0,0 +1,18 @@
+<div class="reference" id="reference">
+  <span class="reference-book" id="reference-book">{{ reference.book }}</span>
+  <label class="visually-hidden" for="reference-chapter">Chapter</label>
+  <select class="reference-chapter" id="reference-chapter" name="at"
+          hx-get="api/reference" hx-target="#reference-verse"
+          hx-swap="innerHTML">
+  {%- for chapter in reference.chapters %}
+    <option value="{{ chapter.id }}"
+            {%- if chapter.id == reference.chapter %} selected{% endif %}>{{ chapter.label }}</option>
+  {%- endfor %}
+  </select>
+  <span class="reference-sep">:</span>
+  <label class="visually-hidden" for="reference-verse">Verse</label>
+  <select class="reference-verse" id="reference-verse" name="at"
+          hx-get="api/reference" hx-target="this" hx-swap="innerHTML">
+{% include "verses.njk" %}
+  </select>
+</div>

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>

assets/templates/verses.njk

@@ -0,0 +1,4 @@
+{% for verse in reference.verses -%}
+    <option value="{{ verse.id }}"
+            {%- if verse.id == reference.verse %} selected{% endif %}>{{ verse.label }}</option>
+{% endfor -%}