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}
+
+ );
+}