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.

public/app.js

@@ -118,51 +118,4 @@
     });
   });
 
-  /* ---------- The menu switcher ----------
-     The bar names the menu you are reading; tapping it lists the rest. The
-     switcher is a link to the landing page, so it still works without this
-     file — the script just opens the sheet instead of navigating. */
-  var switcher = document.querySelector('[data-switcher]');
-  var sheet = document.querySelector('[data-sheet]');
-  var sheetClose = document.querySelector('[data-sheet-close]');
-
-  function closeSheet() {
-    if (!sheet) return;
-    sheet.hidden = true;
-    if (switcher) {
-      switcher.setAttribute('aria-expanded', 'false');
-      switcher.focus({ preventScroll: true });
-    }
-    document.body.style.overflow = '';
-  }
-
-  function openSheet() {
-    if (!sheet) return;
-    sheet.hidden = false;
-    if (switcher) switcher.setAttribute('aria-expanded', 'true');
-    document.body.style.overflow = 'hidden';
-    var target = sheet.querySelector('.sheet__item') || sheetClose;
-    if (target) target.focus({ preventScroll: true });
-  }
-
-  if (switcher && sheet) {
-    switcher.addEventListener('click', function (event) {
-      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
-        return;
-      }
-      event.preventDefault();
-      if (sheet.hidden) openSheet();
-      else closeSheet();
-    });
-
-    sheet.addEventListener('click', function (event) {
-      if (event.target === sheet) closeSheet();
-    });
-
-    if (sheetClose) sheetClose.addEventListener('click', closeSheet);
-
-    document.addEventListener('keydown', function (event) {
-      if (event.key === 'Escape' && !sheet.hidden) closeSheet();
-    });
-  }
 })();

public/styles.css

@@ -212,33 +212,34 @@ a {
   height: 24px;
 }
 
-.switcher {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.3rem 0.5rem;
-  border: 1px solid transparent;
+.bar__nav {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 0.15rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.bar__nav::-webkit-scrollbar {
+  display: none;
+}
+
+.bar__link {
+  padding: 0.35rem 0.6rem;
+  color: var(--ink-dim);
+  font-size: 0.98rem;
+  white-space: nowrap;
+}
+
+.bar__link:hover {
   color: var(--ink);
-  font-size: 1.05rem;
+}
+
+.bar__link.is-current {
+  color: var(--steel);
+  background: var(--accent);
   font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.switcher:hover {
-  border-color: var(--brass-edge);
-}
-
-.switcher__caret {
-  width: 0.45rem;
-  height: 0.45rem;
-  border-right: 1.5px solid var(--copper);
-  border-bottom: 1.5px solid var(--copper);
-  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
-  transition: transform 0.2s ease;
-}
-
-.switcher[aria-expanded='true'] .switcher__caret {
-  transform: rotate(-135deg) translate(-0.05rem, -0.05rem);
 }
 
 .pour {
@@ -257,109 +258,6 @@ a {
   background: var(--copper);
 }
 
-/* ---------- The switcher sheet ---------- */
-
-.sheet {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  display: flex;
-  align-items: flex-end;
-  background: color-mix(in srgb, #05090a 74%, transparent);
-}
-
-.sheet[hidden] {
-  display: none;
-}
-
-.sheet__inner {
-  width: 100%;
-  max-height: 88vh;
-  overflow-y: auto;
-  padding: 1.1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
-  background: var(--rail);
-  border-top: 2px solid var(--copper);
-  animation: sheet-rise 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
-}
-
-@keyframes sheet-rise {
-  from {
-    transform: translateY(1.6rem);
-    opacity: 0.5;
-  }
-  to {
-    transform: none;
-    opacity: 1;
-  }
-}
-
-.sheet__title {
-  margin: 0 0 0.5rem;
-  color: var(--ink-dim);
-  font-size: 0.85rem;
-}
-
-.sheet__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.sheet__item {
-  display: grid;
-  grid-template-columns: 2.4rem 1fr auto;
-  align-items: center;
-  gap: 0.85rem;
-  padding: 0.5rem 0.4rem;
-  border-bottom: 1px solid var(--hairline-soft);
-}
-
-.sheet__item.is-current {
-  background: color-mix(in srgb, var(--accent) 13%, transparent);
-}
-
-.sheet__peek {
-  width: 2.4rem;
-  height: 3rem;
-  overflow: hidden;
-  background: var(--paper);
-}
-
-.sheet__peek img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: top center;
-}
-
-.sheet__name {
-  font-size: 1.12rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.sheet__state {
-  color: var(--ink-dim);
-  font-size: 0.8rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.sheet__item.is-current .sheet__state {
-  color: var(--accent);
-}
-
-.sheet__close {
-  margin-top: 0.9rem;
-  padding: 0.5rem 0.85rem;
-  border: 1px solid var(--brass-edge);
-  background: none;
-  color: var(--ink);
-  font: inherit;
-  font-size: 0.9rem;
-  cursor: pointer;
-}
-
 /* ---------- The pages themselves ---------- */
 
 .section-heading {