diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx index bdef0403e5c..c96fe74ff77 100644 --- a/packages/console/app/src/component/header.tsx +++ b/packages/console/app/src/component/header.tsx @@ -46,6 +46,18 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo contextMenuPosition: { x: 0, y: 0 }, }) + let mobileToggle: HTMLButtonElement | undefined + createEffect(() => { + if (!store.mobileMenuOpen) return + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key !== "Escape") return + setStore("mobileMenuOpen", false) + mobileToggle?.focus() + } + document.addEventListener("keydown", handleKeyDown) + onCleanup(() => document.removeEventListener("keydown", handleKeyDown)) + }) + createEffect(() => { const handleClickOutside = () => { setStore("contextMenuOpen", false) @@ -215,9 +227,10 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo