diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx index 3e2dccf059..2edbacc0a0 100644 --- a/src/app/conf/2025/components/navbar.tsx +++ b/src/app/conf/2025/components/navbar.tsx @@ -10,6 +10,7 @@ import { Badge } from "../../_components/badge" import MenuIcon from "../pixelarticons/menu.svg?svgr" import CloseIcon from "../pixelarticons/close.svg?svgr" import { GraphQLConfLogoLink } from "./graphql-conf-logo-link" +import { Anchor } from "../../_design-system/anchor" export interface NavbarProps { links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[] @@ -30,6 +31,15 @@ export function Navbar({ links, year }: NavbarProps): ReactElement { useEffect(() => { document.body.style.overflow = mobileDrawerOpen ? "hidden" : "auto" + if (mobileDrawerOpen) { + const closeOnEscape = (event: KeyboardEvent) => { + if (event.key === "Escape") setMobileDrawerOpen(false) + } + document.addEventListener("keydown", closeOnEscape) + return () => { + document.removeEventListener("keydown", closeOnEscape) + } + } }, [mobileDrawerOpen]) return ( @@ -79,19 +89,19 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
{links.map( ({ "aria-disabled": isDisabled, children, ...link }) => ( - { + if (mobileDrawerOpen) { + setMobileDrawerOpen(false) + } + }} > {children} {isDisabled && ( @@ -99,7 +109,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement { Soon )} - + ), )}