Closed brookslybrand closed 5 months ago
Can be done with #234
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 :)
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