Skip to content

fix(ux): close mobile menu on focusout and use preset surface (#898) - #911

Open
ralksta wants to merge 1 commit into
devfrom
fix/898-mobile-nav-focusout-surface
Open

ralksta wants to merge 1 commit into
devfrom
fix/898-mobile-nav-focusout-surface

Conversation

@ralksta

@ralksta ralksta commented Nov 10, 2026

Copy link
Copy Markdown
Owner

Fixes #898.

Changes

  • In components/MobileNav.tsx, added a focusout listener while the menu is open that checks relatedTarget. When focus leaves both the menu button and dropdown panel (e.g. tabbing past the last link to the theme toggle or page content), the panel closes.
  • In app/styles/header.css, replaced hardcoded rgba(26, 26, 26, 0.98) and light override with color-mix(in srgb, var(--bg-primary) 98%, transparent) so each preset gets its own tinted surface.
  • Added unit test in components/__tests__/MobileNav.test.tsx verifying that focus leaving the panel closes it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant