42 lines
2.2 KiB
Plaintext
42 lines
2.2 KiB
Plaintext
{# 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>
|