remix-run / remix-website

327 stars 74 forks source link

Add auto scrolling to docs navigation #233

Closed brookslybrand closed 5 months ago

brookslybrand commented 5 months ago

When you refresh or land on a certain page, it does not auto scroll/focus on the specific doc you're on in the left hand side, which is a bit disorienting

The "scroll" should be automatic (no smooth scrolling), in that that's what should be in view. This scroll resetting does not happen with the main content, so not totally sure what that's about.

https://github.com/remix-run/remix-website/assets/12396812/a5c3caae-ea87-42c6-ba1a-87d31dab7e4e

brookslybrand commented 5 months ago

Can be done with #234

brookslybrand commented 5 months ago

Thinking this is impossible without JS, I don't think anything but the main body holds scroll state between navigations/refreshes. The sidebar is a nav with overflow-y: auto

The JS fix is not worth it to me because you have to introduce CLS. Here's a slowed down network to exaggerate it. On a fast network it's just a really annoying flash

function MenuLink({ to, children }: { to: string; children: React.ReactNode }) {
  let isActive = useIsActivePath(to);
  return (
    <Link
      prefetch="intent"
      to={to}
      ref={(node) => {
        // const isMounted = mounted.current;
        if (!isActive) return;

        node?.scrollIntoView({
          behavior: "instant",
          block: "center",
        });
      }}
      className={cx(
        "group relative my-px flex min-h-[2.25rem] items-center rounded-2xl border-transparent px-3 py-2 text-sm",
        "outline-none transition-colors duration-100 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-800  dark:focus-visible:ring-gray-100",
        isActive
          ? ["text-black dark:text-gray-100", "bg-blue-200 dark:bg-blue-800"]
          : [
              "text-gray-700 hover:text-black dark:text-gray-400 dark:hover:text-gray-100",
              "hover:bg-blue-100 dark:hover:bg-blue-800/50",
            ],
      )}
      children={children}
    />
  );
}

https://github.com/remix-run/remix-website/assets/12396812/0c25b83d-b065-4315-a8e1-bf7c3c0977a2

Closing, but if anyone can think of a solution let me know :)