From f0c6ca346c43b67d963f907e35ffa104fd781205 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 25 Jul 2026 22:06:08 +0000
Subject: [PATCH] fix(website): keep sidebar scroll position across navigations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs rail was wrapped in `View.Show`, which rebuilds its children on
every notification from the condition signal. The condition derives from
the router location, and `Computed.make` re-notifies on every dependency
change even when the computed value is unchanged, so navigating between
spec pages tore down and re-created the whole sidebar DOM — and the
freshly built <nav> started back at scrollTop 0.

Mount the rail once and express "hidden on the landing page" as part of
its existing reactive class instead, so navigation only updates the class
attribute in place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LwXbAeJqPcPHSvhRqcPmQA
---
 website/src/App.res | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/website/src/App.res b/website/src/App.res
index f0cd21b..a2858f7 100644
--- a/website/src/App.res
+++ b/website/src/App.res
@@ -219,15 +219,22 @@ module TraitsGroup = {
 module Sidebar = {
   @jsx.component
   let make = () => {
-    let cls = Computed.make(() =>
+    // The rail is mounted once for the whole session and every state it has —
+    // hidden on the landing page, collapsed, open — is expressed as a class.
+    // Gating it on `View.Show` instead would rebuild its DOM on every
+    // navigation (the condition re-renders its children whenever the route
+    // signal fires, even when the condition itself is unchanged), and a rebuilt
+    // <nav> starts back at scrollTop 0.
+    let cls = Computed.make(() => {
       // Mobile: fixed drawer that slides in from the left below the topbar.
       // Desktop (lg): an in-flow rail that collapses its width.
-      "fixed bottom-0 left-0 top-14 z-40 w-64 shrink-0 overflow-hidden border-r border-neutral-200 bg-neutral-50 transition-transform duration-200 ease-out lg:static lg:top-0 lg:transition-[width] " ++ (
-        Signal.get(sidebarOpen)
-          ? "translate-x-0 lg:w-64"
-          : "-translate-x-full lg:w-0 lg:translate-x-0"
-      )
-    )
+      let base = "fixed bottom-0 left-0 top-14 z-40 w-64 shrink-0 overflow-hidden border-r border-neutral-200 bg-neutral-50 transition-transform duration-200 ease-out lg:static lg:top-0 lg:transition-[width] "
+      let state = Signal.get(sidebarOpen)
+        ? "translate-x-0 lg:w-64"
+        : "-translate-x-full lg:w-0 lg:translate-x-0"
+      let landing = Signal.get(Router.location()).pathname == "/"
+      landing ? "hidden " ++ base ++ state : base ++ state
+    })
     <aside class={Prop.signal(cls)}>
       <nav class="h-full w-64 overflow-y-auto p-2">
         {
@@ -1070,14 +1077,13 @@ let make = () => {
   ])
   // The docs rail (and its mobile scrim) belong to the catalogue, not to the
   // landing page.
-  let docs = notLanding()
   let scrim = Computed.make(() =>
     Signal.get(sidebarOpen) && Signal.get(Router.location()).pathname != "/"
   )
   <div class="flex h-screen flex-col">
     <Topbar />
     <div class="flex min-h-0 flex-1">
-      <View.Show when_={Prop.signal(docs)}> <Sidebar /> </View.Show>
+      <Sidebar />
       // Dim the page behind the mobile drawer.
       <View.Show when_={Prop.signal(scrim)}>
         <div