Navbar: move the API link out of the primary nav to the far right of the header #238

Closed
opened 2026-09-09 15:32:11 +00:00 by crueber · 3 comments
Owner

What's requested

The API link currently sits in the primary site nav amid the functional links (explore / import / API / keys / setup). Move it to the far right side of the navbar — grouped with the utility chrome (notification tray, theme toggle) rather than the functionality. This is an interim placement: a fuller footer will absorb these links later.

Current code

web/src/App.jsx:51-57 — the nav is one flat list:

<nav class="site-nav flex items-center gap-4">
  <A href="/explore">explore</A>
  <A href="/import">import</A>
  <A href="/api">API</A>
  <A href="/keys">keys</A>
  <A href="/setup">setup</A>
</nav>

The far-right cluster is the existing ml-auto div at App.jsx:58-70 (NotificationTray + theme toggle). The API link should move there, ahead of (left of) the tray and toggle, keeping the ml-auto group as the right edge.

Acceptance criteria

  • API is removed from the site-nav list; remaining order explore → import → keys → setup is unchanged.
  • API renders in the right-aligned cluster (ml-auto div), left of the NotificationTray and theme toggle, visually consistent with the nav links (same link styling/active-state treatment as the others).
  • Mobile/narrow layout still behaves: the link stays reachable and doesn't wrap awkwardly (site-header is a flex row — verify at narrow widths).
  • No route or href change — still /api (Apidocs.jsx).

Out of scope (noted for later)

Footer work — user plans to add more detail to a footer eventually; this issue only covers the interim navbar placement.

## What's requested The **API** link currently sits in the primary site nav amid the functional links (explore / import / API / keys / setup). Move it to the far right side of the navbar — grouped with the utility chrome (notification tray, theme toggle) rather than the functionality. This is an interim placement: a fuller footer will absorb these links later. ## Current code `web/src/App.jsx:51-57` — the nav is one flat list: ```jsx <nav class="site-nav flex items-center gap-4"> <A href="/explore">explore</A> <A href="/import">import</A> <A href="/api">API</A> <A href="/keys">keys</A> <A href="/setup">setup</A> </nav> ``` The far-right cluster is the existing `ml-auto` div at `App.jsx:58-70` (NotificationTray + theme toggle). The API link should move there, ahead of (left of) the tray and toggle, keeping the `ml-auto` group as the right edge. ## Acceptance criteria - [ ] `API` is removed from the `site-nav` list; remaining order explore → import → keys → setup is unchanged. - [ ] `API` renders in the right-aligned cluster (`ml-auto` div), left of the NotificationTray and theme toggle, visually consistent with the nav links (same link styling/active-state treatment as the others). - [ ] Mobile/narrow layout still behaves: the link stays reachable and doesn't wrap awkwardly (site-header is a flex row — verify at narrow widths). - [ ] No route or href change — still `/api` (Apidocs.jsx). ## Out of scope (noted for later) Footer work — user plans to add more detail to a footer eventually; this issue only covers the interim navbar placement.
Author
Owner

Fixed by #249 (branch fix/issue-238): API link moved to the ml-auto cluster left of tray + toggle; nav keeps explore → import → keys → setup; /api route unchanged. Browser check (wide + narrow, both themes) is open — no runnable browser in this environment; headless pins + vite build + compiled-CSS parity are green.

Fixed by #249 (branch fix/issue-238): API link moved to the ml-auto cluster left of tray + toggle; nav keeps explore → import → keys → setup; /api route unchanged. Browser check (wide + narrow, both themes) is open — no runnable browser in this environment; headless pins + vite build + compiled-CSS parity are green.
Author
Owner

Review of PR #249 (fix/issue-238, commit 61dcb0f) — verified in scratch worktree, main untouched.

PASS, no changes needed:

  • web/src/App.jsx:51-56 — API gone from site-nav; remaining order explore→import→keys→setup intact.
  • web/src/App.jsx:57-59 — API is first child of the ml-auto div, left of NotificationTray + theme toggle.
  • web/src/ui.css:32 — selector extended to .site-nav a, .nav-link; compiled dist CSS confirms one shared rule (base + :hover + dark variants identical). Styling parity by construction.
  • Route/href unchanged: single href="/api" in App.jsx; /api→Apidocs route (index.jsx:59) untouched.
  • Narrow widths: header stays one flex row, total content identical (moved, not added) — no new wrap behavior. ml-auto cluster is flex/items-center, same overflow as before.
  • web/test/unit/nav-api-right.test.js — pins nav order+absence, ml-auto placement left of tray+toggle, single /api entry + nav-link class + CSS rule. Meaningful, source-text style matching landing/how-it-works tests.
  • No new deps: package.json still solid-js + @solidjs/router + marked@18.0.11 + dompurify@3.4.15 (Law 1 ok). No Go changes. Doc entry in docs/go/12_web_ui.md accurate (Law 12 ok).

Verification:

  • node --test web/test/unit/*.test.js: 463/463 pass (note: scratch worktree initially lacked web/node_modules so 7 markdown-related files failed to import; re-ran with deps copied from main checkout — PR touches no deps, so equivalent).
  • vite build + esbuild SDK bundle: exit 0. (make web's pnpm auto-install step refuses a copied node_modules dir in a scratch path — environmental only, not a PR issue.)
  • Browser: unavailable. Shared CDP daemon answers /json/list (one idle about:blank page) but /json/new creates nothing, so no isolated tab; left the shared page untouched per no-disturb rule. Doc entry already discloses browser check open. No own daemon started.

MERGE RECOMMENDATION: ready to merge (no fixes pushed — nothing to fix).

Review of PR #249 (fix/issue-238, commit 61dcb0f) — verified in scratch worktree, main untouched. PASS, no changes needed: - web/src/App.jsx:51-56 — API gone from site-nav; remaining order explore→import→keys→setup intact. - web/src/App.jsx:57-59 — API is first child of the ml-auto div, left of NotificationTray + theme toggle. - web/src/ui.css:32 — selector extended to `.site-nav a, .nav-link`; compiled dist CSS confirms one shared rule (base + :hover + dark variants identical). Styling parity by construction. - Route/href unchanged: single href="/api" in App.jsx; /api→Apidocs route (index.jsx:59) untouched. - Narrow widths: header stays one flex row, total content identical (moved, not added) — no new wrap behavior. ml-auto cluster is flex/items-center, same overflow as before. - web/test/unit/nav-api-right.test.js — pins nav order+absence, ml-auto placement left of tray+toggle, single /api entry + nav-link class + CSS rule. Meaningful, source-text style matching landing/how-it-works tests. - No new deps: package.json still solid-js + @solidjs/router + marked@18.0.11 + dompurify@3.4.15 (Law 1 ok). No Go changes. Doc entry in docs/go/12_web_ui.md accurate (Law 12 ok). Verification: - node --test web/test/unit/*.test.js: 463/463 pass (note: scratch worktree initially lacked web/node_modules so 7 markdown-related files failed to import; re-ran with deps copied from main checkout — PR touches no deps, so equivalent). - vite build + esbuild SDK bundle: exit 0. (make web's pnpm auto-install step refuses a copied node_modules dir in a scratch path — environmental only, not a PR issue.) - Browser: unavailable. Shared CDP daemon answers /json/list (one idle about:blank page) but /json/new creates nothing, so no isolated tab; left the shared page untouched per no-disturb rule. Doc entry already discloses browser check open. No own daemon started. MERGE RECOMMENDATION: ready to merge (no fixes pushed — nothing to fix).
Author
Owner

Fixed by PR #249 (review clean; 463/463 node tests), merged. Closing.

Fixed by PR #249 (review clean; 463/463 node tests), merged. Closing.
crueber added this to the v1 milestone 2026-09-10 22:27:10 +00:00
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
crueber/walhub#238
No description provided.