diff --git a/frontend/src/ts/components/layout/header/Logo.tsx b/frontend/src/ts/components/layout/header/Logo.tsx index 65292a09daec..1aedbc308a92 100644 --- a/frontend/src/ts/components/layout/header/Logo.tsx +++ b/frontend/src/ts/components/layout/header/Logo.tsx @@ -25,7 +25,7 @@ export function Logo(): JSXElement { diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx index cd536ca68133..d44ed398cd3c 100644 --- a/frontend/src/ts/components/layout/header/Nav.tsx +++ b/frontend/src/ts/components/layout/header/Nav.tsx @@ -1,8 +1,15 @@ import { useQuery } from "@tanstack/solid-query"; -import { createMemo, JSXElement, Show } from "solid-js"; +import { + createMemo, + createSignal, + JSXElement, + onCleanup, + Show, +} from "solid-js"; import { restartTestEvent } from "../../../events/test"; import { createEffectOn } from "../../../hooks/effects"; +import { useRefWithUtils } from "../../../hooks/useRefWithUtils"; import { prefetchAboutPage, prefetchLeaderboardPage, @@ -27,6 +34,19 @@ import { AccountMenu } from "./AccountMenu"; import { AccountXpBar } from "./AccountXpBar"; export function Nav(): JSXElement { + const [getAccountMenuOpen, setAccountMenuOpen] = createSignal(false); + const isCoarse = () => window.matchMedia("(pointer: coarse)").matches; + const [accountMenuRef, accountMenuEl] = useRefWithUtils(); + + const handleClickOutside = (e: MouseEvent) => { + const el = accountMenuEl(); + if (getAccountMenuOpen() && el && !el.native.contains(e.target as Node)) { + setAccountMenuOpen(false); + } + }; + document.addEventListener("click", handleClickOutside); + onCleanup(() => document.removeEventListener("click", handleClickOutside)); + const buttonClass = () => cn("aspect-square", { "opacity-(--nav-focus-opacity)": getFocus(), @@ -154,12 +174,27 @@ export function Nav(): JSXElement { then={(snap) => ( <>
{ + if (isCoarse()) { + if (e.target instanceof HTMLAnchorElement) { + if (e.target.dataset["navItem"] === "account") { + e.preventDefault(); + e.stopPropagation(); + } + setAccountMenuOpen((prev) => !prev); + } + } + }} >
diff --git a/frontend/src/ts/components/pages/test/TestConfig.tsx b/frontend/src/ts/components/pages/test/TestConfig.tsx index d2f54ed781cd..7b4b9efc24ee 100644 --- a/frontend/src/ts/components/pages/test/TestConfig.tsx +++ b/frontend/src/ts/components/pages/test/TestConfig.tsx @@ -45,7 +45,9 @@ export function TestConfig(): JSXElement {