feat(admissions): add sticky left-rail in-page nav, primary first

Rail pins alongside the content with scroll-spy highlighting the current
section (Primary, Secondary, Tips). Collapses to a sticky top pill bar
on narrow screens. Primary section now precedes Secondary.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

nextjs-app/components/AdmissionsView.module.css

@@ -1,7 +1,83 @@
-.page {
+.shell {
-  max-width: 900px;
+  max-width: 1120px;
   margin: 0 auto;
   padding: 0 1.25rem 4rem;
+  display: grid;
+  grid-template-columns: 160px minmax(0, 1fr);
+  gap: 2.5rem;
+  align-items: start;
+}
+
+.page {
+  max-width: 900px;
+  width: 100%;
+  justify-self: center;
+}
+
+/* ─── In-page nav rail ────────────────────────────────── */
+
+.nav {
+  position: sticky;
+  top: 1.5rem;
+  padding-top: 3.75rem;
+}
+
+.navLabel {
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted, #6d685f);
+  margin-bottom: 0.85rem;
+  padding-left: 0.85rem;
+}
+
+.navList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  border-left: 2px solid var(--border-color, #e5dfd5);
+}
+
+.navLink {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.45rem 0.85rem;
+  margin-left: -2px;
+  border-left: 2px solid transparent;
+  font-size: 0.88rem;
+  font-weight: 500;
+  color: var(--text-secondary, #5c564d);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.navLink:hover {
+  color: var(--text-primary, #1a1612);
+}
+
+.navLinkActive {
+  color: var(--accent-teal, #2d7d7d);
+  font-weight: 700;
+  border-left-color: var(--accent-teal, #2d7d7d);
+}
+
+.navDot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--border-color, #e5dfd5);
+  flex-shrink: 0;
+  transition: background 0.15s ease;
+}
+
+.navLinkActive .navDot {
+  background: var(--accent-teal, #2d7d7d);
 }
 
 /* ─── Hero ───────────────────────────────────────────── */
@@ -396,6 +472,60 @@
 
 /* ─── Responsive ─────────────────────────────────────── */
 
+@media (max-width: 960px) {
+  .shell {
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding-top: 0;
+  }
+
+  .nav {
+    position: sticky;
+    top: 0;
+    padding-top: 0;
+    background: var(--bg-primary, #faf8f3);
+    border-bottom: 1px solid var(--border-color, #e5dfd5);
+    margin: 0 -1.25rem 1rem;
+    padding: 0.6rem 1.25rem;
+    z-index: 10;
+  }
+
+  .navLabel {
+    display: none;
+  }
+
+  .navList {
+    flex-direction: row;
+    gap: 0.35rem;
+    border-left: none;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .navList::-webkit-scrollbar {
+    display: none;
+  }
+
+  .navLink {
+    padding: 0.4rem 0.9rem;
+    margin-left: 0;
+    border-left: none;
+    border-radius: 999px;
+    background: transparent;
+    white-space: nowrap;
+  }
+
+  .navLinkActive {
+    background: var(--text-primary, #1a1612);
+    color: #fff;
+    border-left: none;
+  }
+
+  .navLinkActive .navDot {
+    background: #fff;
+  }
+}
+
 @media (max-width: 768px) {
   .heroTitle {
     font-size: 2rem;

nextjs-app/components/AdmissionsView.tsx

@@ -144,15 +144,79 @@ const TIPS: Tip[] = [
 
 /* ─── Component ────────────────────────────────────────── */
 
+const NAV_ITEMS = [
+  { id: 'primary',   label: 'Primary' },
+  { id: 'secondary', label: 'Secondary' },
+  { id: 'tips',      label: 'Tips' },
+] as const;
+
+type NavId = typeof NAV_ITEMS[number]['id'];
+
 export function AdmissionsView() {
   const [chipDays, setChipDays] = useState<(number | null)[]>(CHIPS.map(() => null));
+  const [activeId, setActiveId] = useState<NavId>('primary');
 
   useEffect(() => {
     setChipDays(CHIPS.map(c => daysUntil(c.month, c.day)));
   }, []);
 
+  useEffect(() => {
+    const sections = NAV_ITEMS
+      .map(item => document.getElementById(item.id))
+      .filter((el): el is HTMLElement => el !== null);
+
+    if (sections.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter(e => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
+        if (visible[0]) setActiveId(visible[0].target.id as NavId);
+      },
+      { rootMargin: '-30% 0px -55% 0px', threshold: [0, 0.25, 0.5, 0.75, 1] },
+    );
+
+    sections.forEach(s => observer.observe(s));
+    return () => observer.disconnect();
+  }, []);
+
+  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: NavId) => {
+    e.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    const top = el.getBoundingClientRect().top + window.scrollY - 16;
+    window.scrollTo({ top, behavior: 'smooth' });
+    setActiveId(id);
+  };
+
   return (
-    <div className={styles.page}>
+    <div className={styles.shell}>
+
+      {/* In-page nav — sticky left rail on desktop, sticky top pills on mobile */}
+      <aside className={styles.nav} aria-label="On this page">
+        <div className={styles.navLabel}>On this page</div>
+        <ul className={styles.navList}>
+          {NAV_ITEMS.map(item => {
+            const isActive = activeId === item.id;
+            return (
+              <li key={item.id}>
+                <a
+                  href={`#${item.id}`}
+                  onClick={(e) => handleNavClick(e, item.id)}
+                  className={[styles.navLink, isActive ? styles.navLinkActive : ''].filter(Boolean).join(' ')}
+                  aria-current={isActive ? 'true' : undefined}
+                >
+                  <span className={styles.navDot} aria-hidden="true" />
+                  <span>{item.label}</span>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </aside>
+
+      <div className={styles.page}>
 
       {/* Hero */}
       <section className={styles.hero}>
@@ -198,45 +262,8 @@ export function AdmissionsView() {
         </div>
       </section>
 
-      {/* Secondary track */}
-      <section className={styles.track}>
-        <div className={styles.trackHeader}>
-          <div className={styles.trackHeaderLeft}>
-            <span className={styles.trackKicker}>Year 7 entry</span>
-            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
-            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
-          </div>
-          <div className={styles.trackDates}>
-            <div className={styles.trackDateRow}>
-              <span className={styles.trackDateLabel}>Deadline</span>
-              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
-            </div>
-            <div className={styles.trackDateRow}>
-              <span className={styles.trackDateLabel}>Offer Day</span>
-              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
-            </div>
-          </div>
-        </div>
-
-        <ol className={styles.timeline}>
-          {SECONDARY_STEPS.map((step, i) => (
-            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
-              <div className={styles.stepDotCol}>
-                <div className={styles.stepDot} />
-                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
-              </div>
-              <div className={styles.stepContent}>
-                {step.date && <div className={styles.stepDate}>{step.date}</div>}
-                <div className={styles.stepTitle}>{step.title}</div>
-                <p className={styles.stepBody}>{step.body}</p>
-              </div>
-            </li>
-          ))}
-        </ol>
-      </section>
-
       {/* Primary track */}
-      <section className={styles.track}>
+      <section id="primary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
         <div className={styles.trackHeader}>
           <div className={styles.trackHeaderLeft}>
             <span className={styles.trackKicker}>Reception entry</span>
@@ -272,8 +299,45 @@ export function AdmissionsView() {
         </ol>
       </section>
 
+      {/* Secondary track */}
+      <section id="secondary" className={styles.track} style={{ scrollMarginTop: '1rem' }}>
+        <div className={styles.trackHeader}>
+          <div className={styles.trackHeaderLeft}>
+            <span className={styles.trackKicker}>Year 7 entry</span>
+            <h2 className={styles.trackTitle}>Secondary school admissions</h2>
+            <p className={styles.trackSub}>For children starting secondary school (Year 7) in September. Applications are submitted in the autumn of Year 6.</p>
+          </div>
+          <div className={styles.trackDates}>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Deadline</span>
+              <span className={styles.trackDateVal}>{fmtDate(10, 31)}</span>
+            </div>
+            <div className={styles.trackDateRow}>
+              <span className={styles.trackDateLabel}>Offer Day</span>
+              <span className={styles.trackDateVal}>{fmtDate(3, 1)}</span>
+            </div>
+          </div>
+        </div>
+
+        <ol className={styles.timeline}>
+          {SECONDARY_STEPS.map((step, i) => (
+            <li key={i} className={[styles.step, step.highlight === 'deadline' ? styles.stepDeadline : step.highlight === 'offer' ? styles.stepOffer : ''].filter(Boolean).join(' ')}>
+              <div className={styles.stepDotCol}>
+                <div className={styles.stepDot} />
+                {i < SECONDARY_STEPS.length - 1 && <div className={styles.stepLine} />}
+              </div>
+              <div className={styles.stepContent}>
+                {step.date && <div className={styles.stepDate}>{step.date}</div>}
+                <div className={styles.stepTitle}>{step.title}</div>
+                <p className={styles.stepBody}>{step.body}</p>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
       {/* Tips */}
-      <section className={styles.tips}>
+      <section id="tips" className={styles.tips} style={{ scrollMarginTop: '1rem' }}>
         <h2 className={styles.tipsHeading}>Three things most parents get wrong</h2>
         <div className={styles.tipsGrid}>
           {TIPS.map((tip, i) => (
@@ -286,6 +350,7 @@ export function AdmissionsView() {
         </div>
       </section>
 
+      </div>
     </div>
   );
 }