diff --git a/app/routes/to/$organization.$tournament.tsx b/app/routes/to/$organization.$tournament.tsx index 639547ac4..90dfa7422 100644 --- a/app/routes/to/$organization.$tournament.tsx +++ b/app/routes/to/$organization.$tournament.tsx @@ -24,6 +24,7 @@ import { makeTitle, requireUser } from "~/utils"; import type { MyCSSProperties } from "~/utils"; import { useUser } from "~/utils/hooks"; import tournamentStylesUrl from "../../styles/tournament.css"; +import * as React from "react"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: tournamentStylesUrl }]; @@ -133,17 +134,12 @@ export default function TournamentPage() { className="tournament__links-container" > {navLinks.map(({ code, text, icon }) => ( - // TODO: on mobile keep the active link in center - - {icon} {text} - + code={code} + icon={icon} + text={text} + /> ))} @@ -156,3 +152,37 @@ export default function TournamentPage() { ); } + +function TournamentNavLink({ + code, + icon, + text, +}: { + code: string; + icon: React.ReactNode; + text: string; +}) { + const ref = React.useRef(null); + + React.useEffect(() => { + if (!ref.current?.className.includes("active")) return; + ref.current?.scrollIntoView({ + behavior: "smooth", + inline: "center", + block: "nearest", + }); + }, []); + + return ( + + {icon} {text} + + ); +}