Browse Source

[Beta] Reset nav scroll on tab switch

main
Dan Abramov 2 years ago
parent
commit
e45e126006
  1. 17
      beta/src/components/Layout/Nav/Nav.tsx

17
beta/src/components/Layout/Nav/Nav.tsx

@ -187,6 +187,11 @@ export default function Nav() {
}); });
}, [showFeedback]); }, [showFeedback]);
function selectTab(nextTab) {
setTab(nextTab);
scrollParentRef.current!.scrollTop = 0;
}
return ( return (
<div <div
className={cn( className={cn(
@ -305,13 +310,19 @@ export default function Nav() {
{isOpen && ( {isOpen && (
<div className="bg-wash dark:bg-wash-dark px-5 flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10"> <div className="bg-wash dark:bg-wash-dark px-5 flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
<TabButton isActive={tab === 'home'} onClick={() => setTab('home')}> <TabButton
isActive={tab === 'home'}
onClick={() => selectTab('home')}>
Home Home
</TabButton> </TabButton>
<TabButton isActive={tab === 'learn'} onClick={() => setTab('learn')}> <TabButton
isActive={tab === 'learn'}
onClick={() => selectTab('learn')}>
Learn Learn
</TabButton> </TabButton>
<TabButton isActive={tab === 'apis'} onClick={() => setTab('apis')}> <TabButton
isActive={tab === 'apis'}
onClick={() => selectTab('apis')}>
API API
</TabButton> </TabButton>
</div> </div>

Loading…
Cancel
Save