Add sticky chapter outline for the reading demo

2026-09-01 03:44:04 +00:00
parent 5f24a406cf
commit d7c6a239c1
1 changed files with 99 additions and 0 deletions
@@ -0,0 +1,99 @@
 import { useEffect, useMemo, useState } from "react";
 function OutlineBody({ groups, complete, count, total, active, showTitle }) {
  return (
    <>
      <p className="outline-progress">
        {count}/{total} Try-its complete
      </p>
      {showTitle ? <p className="outline-heading">In this chapter</p> : null}
      {groups.map((g) => (
        <div key={g.label} className="outline-group">
          <p className="outline-group-label spec">{g.label}</p>
          <ul>
            {g.items.map((item) => {
              const done = item.recipeId ? !!complete[item.recipeId] : false;
              const isActive = active === item.id;
              return (
                <li key={item.id}>
                  <a
                    href={`#${item.id}`}
                    className={isActive ? "is-active" : undefined}
                    aria-current={isActive ? "location" : undefined}
                  >
                    <span>{item.label}</span>
                    {done ? (
                      <span className="outline-done" aria-label="Try-it complete">
                        ✓
                      </span>
                    ) : null}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </>
  );
 }
 export default function ChapterOutline({
  groups,
  complete = {},
  count = 0,
  total = 0,
  variant = "desktop",
 }) {
  const ids = useMemo(
    () => groups.flatMap((g) => g.items.map((item) => item.id)),
    [groups]
  );
  const [active, setActive] = useState(ids[0] || "");
  useEffect(() => {
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (!els.length || typeof IntersectionObserver === "undefined") return;
    const observer = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((e) => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible[0]?.target?.id) setActive(visible[0].target.id);
      },
      { rootMargin: "-88px 0px -55% 0px", threshold: [0, 0.1, 0.25, 0.5, 1] }
    );
    els.forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, [ids]);
  if (variant === "mobile") {
    return (
      <details className="chapter-outline-mobile">
        <summary>In this chapter</summary>
        <OutlineBody
          groups={groups}
          complete={complete}
          count={count}
          total={total}
          active={active}
          showTitle={false}
        />
      </details>
    );
  }
  return (
    <nav className="chapter-outline" aria-label="In this chapter">
      <OutlineBody
        groups={groups}
        complete={complete}
        count={count}
        total={total}
        active={active}
        showTitle
      />
    </nav>
  );
 }