feat(panel): navigation as a left column, with a section index on the long pages

The navigation was a bar across the top that did not fit on one row — six page
entries and the session block against the panel's width — and had to be split
into two, costing the top of every page. It is now a column down the left edge:
one left edge to scan, the current entry marked down its leading edge, sticky so
it stays in view, and room under the entries for the current page's own
sections. Below the width the two columns need it lies back down into the same
wrapping rows as before; six entries need no drawer.

The section index is for the two pages long enough to need one — the domain page
(nine cards) and the status page (eight). Each card carries an id and the page's
template defines the list by overriding an empty "sections" block in the layout,
so a page that defines nothing renders no index. panel.js marks the section in
view, looking targets up by id on each pass so the status page swapping its
cards out every five seconds cannot leave it measuring boxes that have left the
document; the links themselves are plain fragment links and need no script.

Verified against the real pages rendered by a local panel at 1300px, 924px and
481px wide.
This commit is contained in:
2026-08-07 04:11:32 +03:00
parent 251344f880
commit 5d3000a48f
8 changed files with 349 additions and 70 deletions
+24
View File
@@ -21,6 +21,30 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
— no `/proc` outside Linux — leave the card in place showing "unknown". The
usage bars are `<meter>` elements: the panel's CSP has no inline-style
exemption, so a bar's length has to travel on an attribute.
- An index of the current page's own sections in the navigation column, for the
two pages long enough to need one: the domain page (nine cards, from the DNS
records to publish down to the danger zone) and the status page (eight). Each
card carries an id and the page's template defines the list
(`{{define "sections"}}`); every other page defines nothing and shows no
index. `panel.js` marks the section currently in view, looking its targets up
by id on each pass so the status page swapping its cards out every five
seconds cannot leave it measuring boxes that have left the document. The
links are plain fragment links and work with JavaScript blocked; only the
highlight needs it.
### Changed
- The panel's navigation is a column down the left edge instead of a bar across
the top. As a bar it did not fit on one row — six page entries and the
session block against the panel's width — and had to be split into two,
costing the top of every page; standing it up removes the compromise, gives
the entries one left edge to scan down, and leaves room under them for the
section index above. It is sticky, so both lists stay in view on the long
pages, and the current entry is marked down its leading edge rather than
underlined. Below the width the two columns need, it lies back down into the
wrapping rows it used to be — no drawer and no hamburger, since six entries
fit. The markup now lists the blocks in the order they are drawn, so the tab
order follows the eye instead of starting at Sign out.
## [0.5.0] - 2026-08-06