--- title: Site global navigation — Plan type: feat date: 2026-10-23 topic: site-global-navigation status: approved-implementing production: https://digitalwalls.vercel.app ---

Site global navigation — Plan

Status: Approved by Adam (2026-10-23). Implementation in this branch. Audience: Adam (approve), coding agent (build after approval). Constraint: Preserve Visit / Arrange / Share wall chrome; nav complements it. Match Option B / soft-elevated language in styles.css — no generic purple AI aesthetic.

Locked decisions (2026-10-23)

1. Wall Visit: No persistent site-nav bar. Explore · Studio · My walls live under the collapsed ··· menu (Visit and Arrange). 2. Studio: Include in the public triangle now for easy access. May become more private later — do not build auth gating yet; ship the link only. 3. Label: My walls (not “Walls”).

---

1. Product goal

A person can move between the three primary product surfaces without hunting for scattered links:

Success means: from any of those surfaces (and from wall chrome in a non-intrusive way), the other two destinations are one obvious click away, with a clear “you are here,” without turning Visit into a dashboard.

Success criteria

1. Explore, Studio, and Boards each expose the same three-destination nav with correct active state. 2. Guests can reach Explore and Studio; My walls either lands on sign-in (current boards page) or is labeled so intent is clear. 3. Wall Visit mode stays scene-first: Visit / Arrange / Share remain primary; site nav does not compete with the floating visit chrome or sit on the wall hero. 4. Labels and destinations are consistent (no more “Back to the wall” that actually goes to Explore). 5. Desktop and ~390px mobile remain usable; no horizontal page overflow.

---

2. Current state (inventory)

Chrome today is ad hoc, not a shared site nav.

Explore (public/explore.html)

• Header: brand kicker “Digital Walls”, H1, lede.
• nav.explore-nav: My walls (/boards, primary teal button) + Try a guest board (/wall?template=pick).
• No Studio link.
• Footer session line points people to My walls to sign in for upvotes.

Boards (public/boards.html)

• Page header: “My walls” + status; auth form or wall grid.
• Footer only: Explore · Open editor · Studio (plain text links).
• No top site nav; Studio is easy to miss.

Wall (public/index.html → /wall, also /?board=…)

• Start screen: Explore, My walls, Open editor, Studio (Studio unhides when /api/version returns studio: true).
• App topbar (Arrange): save status + Visit / Arrange + Share + account + ··· menu (boards switcher, backup, etc.). Brand block with Studio link is archived / hidden.
• Visit mode: floating top-right chrome only (mode toggle, Share, account, menu) — intentional scene-first pattern (docs/UX_IMPROVEMENTS.md, visit CSS in styles.css).
• Edit dock: Add / Undo / Redo / Setup — wall tools, not site nav.
• In-app “My boards” opens a dialog; “View all walls” → /boards.

Studio (server/studio.js)

• Server-rendered HTML with inline styles (warm stone/cream, green links) — parallel to product CSS, not shared classes.
• Index lead-in: “Back to the wall” → href="/" — mislabeled: / serves Explore when there is no board/auth query (server/server.js publicAssetPath).
• In-page section anchors only; Studio read pages link back to /studio only.
• Public/always-on; not gated by auth.

Gaps this plan closes

• No single Explore ↔ Studio ↔ My walls triangle.
• Inconsistent Studio discovery (wall/version-gated + boards footer; missing on Explore).
• Studio “Back to the wall” → Explore is wrong copy/destination.
• Wall Visit correctly minimizes chrome; any site nav must respect that.

---

3. Surfaces that get the nav

Recommendation (v1): Ship the shared triangle on Explore, Boards, Studio. On Wall, do not add a persistent site-nav bar in Visit or Arrange; optionally add menu items only. Revisit a wall “home” affordance after v1 if people feel trapped on a canvas.

---

4. Labels and destinations

Proposed canonical set:

Rationale: “My walls” already ships on Explore and Boards titles; “Explore” matches the public surface name; “Studio” matches the route and product language.

Not peers of the triangle (keep as secondary CTAs):

• Try a guest board / Open editor → /wall or /wall?template=pick
• In-wall Visit / Arrange / Share
• Studio section anchors (#smoke, #objects, …)

---

5. Auth behavior

Rules for v1:

• Do not hide My walls for guests; discovery of account value is intentional (Explore already uses it as primary CTA).
• Do not gate Studio behind auth (already public).
• Optional later: if signed-in, My walls could deep-link or show identity near the nav — out of scope unless Adam wants it in the same PR.
• Wall account button / logout stays wall chrome, not part of the site nav cluster.

---

6. Visual placement (visit-first)

Explore / Boards / Studio (document pages)

• One site header strip: brand signal (wordmark or “Digital Walls”) left; Explore | Studio | My walls right (or under brand on narrow screens).
• Sit above page H1/lede so the page still has one job (discover / library / your list).
• Style with existing tokens: --bg, --ink, --muted, --teal, --panel, soft borders — align with Explore header and boards start-screen, not a new purple system.
• Studio should stop relying solely on inline orphan CSS for this chrome: either inject a small shared partial + link styles.css, or duplicate a minimal .site-nav block into page() that mirrors product tokens (prefer shared CSS class in styles.css + Studio markup that uses it once Studio loads the stylesheet).

Wall

• Do not put the triangle in the Visit floating chip or over the wall scene.
• Do not add a full-width site header above Visit (breaks immersion called out in docs/visual-reference/external-inspiration/... and UX locked decisions).
• Arrange: keep Visit/Arrange/Share as the mode row; site destinations live in the existing ··· menu under a short “Site” or extend “Boards” section.

---

7. Active state

• Current destination: aria-current="page" on the matching link.
• Visual: stronger weight and/or underline / soft panel highlight using --teal or ink — match Explore’s primary button language only for the active item, not three teal pills.
• Inactive: text links in --ink / --muted, same hit target size on mobile.
• Studio read pages: Studio remains active (section is still Studio).

---

8. Mobile vs desktop

Avoid a sticky bottom app-tab bar on Visit (would fight the edit dock and scene). Sticky top site nav is fine on Explore/Boards/Studio only if it does not steal first-viewport content badly — prefer non-sticky on Explore hero header for v1.

---

9. Implementation approach (after approval)

Preferred: shared markup + shared CSS

Because Explore/Boards are static HTML and Studio is server-rendered, a true SSI/partial is awkward without a build step. Practical options:

A. Shared CSS + duplicated markup (recommended for v1)

• Add .site-nav (and modifiers) to public/styles.css.
• Paste the same small HTML nav into explore.html, boards.html, and Studio page() / indexHtml().
• Document the snippet in a one-line comment: “keep in sync with boards/explore/studio”.
• Lowest risk; matches current multi-shell architecture.

B. Tiny shared fragment fetched client-side

• Overkill for three links; flash of missing nav; skip.

C. Server helper that injects nav into all HTML shells

• Possible later if more shells appear; not needed for three surfaces.

Files likely touched (build phase — not this plan PR)

Studio link destination fix (include in build)

• Change Studio lead link from “Back to the wall” → / to either drop it (replaced by nav) or label Explore → /. Wall destination remains /wall only when intentionally returning to a canvas.

Visual language checklist

• Use existing garden/hearth soft palette (--teal, cream washes).
• No purple gradients, no glassmorphism stack, no emoji nav.
• Studio inline theme already close to product --bg/--ink; keep warm stone when adding shared nav.

---

10. Out of scope

• Redesigning Visit/Arrange/Share or the edit dock
• New IA (e.g. merging Studio into Explore, or account settings page)
• Auth redesign beyond current boards sign-in
• Mobile bottom tab bar / app shell
• Rewriting Studio to a full public/studio.html SPA
• Marketing landing separate from Explore
• Deep links from Studio assets into Arrange catalog (nice later)
• Implementing production UI in this planning PR

---

11. Open questions for Adam

1. Wall escape hatch in v1? Approve menu-only (or none) on Wall, vs a persistent site nav somewhere on Arrange? Recommendation: none on Visit; optional menu items on Arrange/Visit `···`. 2. Studio audience: Keep Studio in the public triangle for everyone, or treat it as creator/internal and de-emphasize (secondary link / version flag)? Today boards always links Studio; wall unhides via studio: true. Recommendation: public peer in the triangle (matches boards footer + always-on /studio). 3. Label “My walls” vs “Walls”? Recommendation: keep My walls for continuity with Explore CTA and boards H1. 4. Guest primary CTA on Explore: Keep “Try a guest board” beside the site nav, or move under the lede as a text button once My walls is no longer the only header CTA? 5. Studio stylesheet: OK to link styles.css from Studio for shared .site-nav, accepting slight visual convergence, or keep Studio self-contained with a copied minimal nav CSS block?

---

12. Build slices

1. S1 — Shared nav on Explore + Boards + Studio ✅ (markup + CSS + Studio copy fix). 2. S2 — Wall menu site links ✅ (Explore · Studio · My walls under ···). 3. S3 — Polish: active styles, mobile tap targets, remove redundant footers, tiny tests ✅ in S1/S2. 4. Later — Studio privacy: optional auth / unlisting from public triangle; not in this PR.

---

13. Approval summary (for Adam)

Ship a three-link site nav — Explore · Studio · My walls — on Explore, Boards, and Studio. Fix Studio’s false “Back to the wall.” Leave wall Visit chrome alone; optionally add the same destinations under the wall ··· menu later. Guests see all three links; My walls still opens the existing sign-in gate. Visuals stay in the soft-elevated / current CSS language.

Approve to proceed to S1 implementation, after answering open questions §11 (especially wall menu and Studio public peer).