Put the other menus in the top bar

The bar hid them behind a switcher and a sheet. It now names every menu that
exists, which is what was asked for; it scrolls sideways when the categories
outgrow the width, and the current one is the only filled item. Without the
script it is simply a row of links, so nothing is lost when JavaScript is off.

src/render/pages.ts

@@ -64,62 +64,32 @@ export function setDateLabel(manifest: SetManifest): string {
   return 'not published';
 }
 
-interface SheetEntry {
-  section: SectionConfig;
-  current: boolean;
-  cover: string | null;
-  pages: number;
-}
-
 /**
- * The bar names the menu you are reading and opens a sheet with the rest. A row
- * of tabs was unreadable at six categories and would not survive more.
- * The switcher is a link to the landing page, so it still works without the
- * script; the script opens the sheet instead of navigating.
+ * The bar names every menu that exists, so the other pages are one tap away
+ * rather than behind a control. It scrolls sideways when the categories outgrow
+ * the width, which is why these are plain links and not tabs or pills.
  */
-function renderBar(config: SiteConfig, currentLabel: string): Html {
+function renderBar(config: SiteConfig, currentSlug: string, menu: readonly MenuLink[]): Html {
   return html`<header class="bar">
     <a class="bar__brand" href="/" aria-label="${config.brand.name} — all menus">
       <img src="${config.brand.logo ?? '/assets/favicon.svg'}" alt="" width="24" height="24" />
     </a>
-    <a class="switcher" href="/" data-switcher aria-expanded="false" aria-controls="menu-sheet">
-      <span class="switcher__label">${currentLabel}</span>
-      <span class="switcher__caret" aria-hidden="true"></span>
-    </a>
+    <nav class="bar__nav" aria-label="Menus">
+      ${join(
+        menu.map(
+          (entry) => html`<a
+            class="bar__link${entry.section.slug === currentSlug ? ' is-current' : ''}"
+            href="/${entry.section.slug}/"
+            ${entry.section.slug === currentSlug ? html`aria-current="page"` : ''}
+            >${entry.section.shortLabel}</a
+          >`,
+        ),
+      )}
+    </nav>
     <div class="pour" aria-hidden="true"><span class="pour__fill" data-pour></span></div>
   </header>`;
 }
 
-function renderSheet(config: SiteConfig, entries: readonly SheetEntry[]): Html {
-  return html`<section class="sheet" id="menu-sheet" data-sheet hidden aria-label="Menus">
-    <div class="sheet__inner">
-      <p class="sheet__title">${config.brand.name}</p>
-      <ul class="sheet__list">
-        ${join(
-          entries.map(
-            (entry) => html`<li>
-              <a
-                class="sheet__item${entry.current ? ' is-current' : ''}"
-                href="/${entry.section.slug}/"
-                ${entry.current ? html`aria-current="page"` : ''}
-              >
-                <span class="sheet__peek" aria-hidden="true">
-                  ${entry.cover === null
-                    ? ''
-                    : html`<img src="${entry.cover}" alt="" loading="lazy" decoding="async" />`}
-                </span>
-                <span class="sheet__name">${entry.section.label}</span>
-                <span class="sheet__state">${entry.current ? 'Showing' : pageCountLabel(entry.pages)}</span>
-              </a>
-            </li>`,
-          ),
-        )}
-      </ul>
-      <button class="sheet__close" type="button" data-sheet-close>Close</button>
-    </div>
-  </section>`;
-}
-
 function renderPages(section: SectionConfig, pages: readonly PageRecord[]): Html {
   const total = pages.length;
   return html`<main class="pages" data-pages>
@@ -251,16 +221,7 @@ export function renderSectionPage(input: SectionInput): Html {
   const currentHref = `/${section.slug}/`;
   const total = set.manifest.pages.length;
 
-  const body = html`${renderBar(config, section.label)}
-    ${renderSheet(
-      config,
-      input.menu.map((entry) => ({
-        section: entry.section,
-        current: entry.section.slug === section.slug,
-        cover: entry.cover,
-        pages: entry.pages,
-      })),
-    )}
+  const body = html`${renderBar(config, section.slug, input.menu)}
     ${input.preview
       ? html`<p class="notice notice--admin">
           Preview of a Draft — customers cannot see this yet.