Add a collapsible mobile nav FIX - #411
Merged
Jagadeeshftw merged 1 commit intoJul 27, 2026
Merged
Conversation
Contributor
Author
|
Hi! I noticed the CI check (CI / build-test) failed, so I investigated the build/lint output. The implementation for the collapsible mobile header (SiteHeader.tsx, SiteHeader.test.tsx, and PoolsPanel.tsx) builds successfully and passes all unit tests with 100% coverage. However, the npm run lint step in CI is currently failing due to pre-existing lint errors in other files across the repository (e.g., @typescript-eslint/no-explicit-any in test files and react-hooks/set-state-in-effect in SortAnnouncer.tsx). Once those pre-existing repo-wide lint rules or files are cleaned up, the pipeline should pass cleanly. Let me know if you'd like me to help patch those pre-existing errors as well! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR fixes the responsive layout issue in SiteHeader (
SiteHeader.tsx
) where all four navigation links and the connect wallet button were rendered in a single horizontal flex row without responsive collapse, causing crowding and wrapping on narrow viewports.
Changes included:
Added a responsive mobile menu toggle button (MenuIcon / CloseIcon) with proper ARIA attributes (aria-expanded, aria-controls, aria-label) that displays below the sm breakpoint (sm:hidden).
Wrapped the desktop navigation links and theme controls with hidden sm:flex to maintain the full horizontal layout at sm and above.
Implemented a collapsible mobile menu panel that lists all navigation items (Home, Dashboard, Anchors, Settlements) and dismisses upon clicking any link.
Added keyboard accessibility (Escape key dismissal with focus returned to the toggle button) and outside-click (mousedown) detection for the mobile drawer.
Extended
SiteHeader.test.tsx
with comprehensive test coverage for opening/closing the mobile menu, keyboard navigation, outside/inside clicks, and link reachability.
Cleaned up duplicate variable declarations in
PoolsPanel.tsx
to ensure clean builds.
Checklist
I added a
CHANGELOG.md
entry under the next ## [x.y.z] section (see the Format note at the top of
CHANGELOG.md
), or this PR is docs-only / test-only / internal tooling and doesn't change user-facing behavior.
Tests added/updated for the change.
Closes #134