{# 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">
      <h2 class="sidebar-title">Navigation</h2>
      <hr class="sidebar-rule">
{%- if reference %}
{% include "reference.njk" %}
{%- endif %}
      {# Names the body's target and swap again: it would otherwise inherit
         the shell's, and swap the index in for the sidebar. #}
      <a class="sidebar-index" href="./"
         hx-target="#content" hx-swap="innerHTML show:window:top">Back to index</a>
    </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>