design: phone-desktop-mode - a Menu with folded sections below 1024 px

The owner, 2026-10-16, of two ways for the navigation of a narrow screen
(pictures at 390 and 980 px): "Вариант 1. Но меню выглядит длинной
простынёй. Там бы сделать сворачивание разделов."

The cause, measured: the bar's menu was always open (navbar-menu
is-active, no burger), and Bulma lays it out below 1024 px as a sheet of
every section's pages, filling the first screen - on every phone, and on
a phone in "desktop site" mode (about 980 px) under columns that Bulma
puts side by side from 769 px; and a container has no side margin below
1024 px, so the page met the screen's edge.

Now, below 1024 px: the bar's menu is hidden (no is-active), and a Menu at
the right of the brand opens a panel over the page - Overview, then each
section as a fold, the current one open, the user's last (Account, Help,
Sign out). <details> all through: no script, like the folded DNS records.
The page and the strip of sibling pages get a 1rem gutter. From 1024 px
nothing changes. check.py: 0 violations; outlines unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/assets/panel-redesign/panel/build.py

@@ -56,11 +56,35 @@ FOOT = ('<footer class="sp-foot">SelfPost 1.8.0 · © 2026 Mix · <a href="#">Li
         ' · <a href="#">Source</a> · No warranty</footer>')
 
 
+def touchnav(section, page):
+    """The navigation below 1024 px: a Menu that opens over the page, its
+    sections folded but the current one - details elements, no script."""
+    out = ['<details class="sp-touchnav"><summary>Menu</summary><div class="sp-touchnav-panel">']
+    for key, label, href, _icon, pages in NAV:
+        if not pages:
+            cur = ' aria-current="page"' if key == section else ""
+            out.append(f'<a href="{href}"{cur}>{label}</a>')
+            continue
+        opened = " open" if key == section else ""
+        out.append(f'<details class="sp-touchnav-group"{opened}><summary>{label}</summary>')
+        for pkey, plabel, phref, picon in pages:
+            cur = ' aria-current="page"' if key == section and pkey == page else ""
+            out.append(f'<a href="{phref}"{cur}><i class="ti {picon}"></i>{plabel}</a>')
+        out.append('</details>')
+    opened = " open" if section == "user" else ""
+    out += [f'<details class="sp-touchnav-group"{opened}><summary><i class="ti ti-user-circle"></i>admin</summary>',
+            '<a href="account.html"><i class="ti ti-key"></i>Account</a>',
+            '<a href="help.html"><i class="ti ti-help"></i>Help</a>',
+            '<form method="post" action="login.html"><button type="submit"><i class="ti ti-logout"></i>Sign out</button></form>',
+            '</details>', '</div></details>']
+    return "".join(out)
+
+
 def navbar(section, page):
     out = ['<nav class="navbar is-primary" aria-label="main navigation">', '  <div class="container">',
            '    <div class="navbar-brand"><a class="navbar-item" href="overview.html">'
-           '<img src="../../selfpost-wordmark.svg" alt="SelfPost"></a></div>',
-           '    <div class="navbar-menu is-active">', '      <div class="navbar-start">']
+           '<img src="../../selfpost-wordmark.svg" alt="SelfPost"></a>' + touchnav(section, page) + '</div>',
+           '    <div class="navbar-menu">', '      <div class="navbar-start">']
     for key, label, href, _icon, pages in NAV:
         cur = " sp-current" if key == section else ""
         if not pages: