Responsive Navigation Sidebar with Collapse Toggle

[Kingsman-99]

Description

The top navigation bar becomes crowded with links on medium-width screens and is inaccessible at all on screens where a hamburger menu should be shown. A collapsible sidebar navigation for tablet and mobile viewports must replace the overflow-prone horizontal nav links.

Technical Context

src/app/layout.tsx switches between a horizontal <nav> on lg and above and a slide-in sidebar below lg managed by src/components/layout/MobileSidebar.tsx (new). A hamburger MenuIcon button from lucide-react in the top bar toggles isOpen state. The sidebar uses Tailwind translate-x-0 / -translate-x-full transitions and an overlay backdrop that closes it on click. Focus is trapped inside the sidebar when open, following the same pattern as modals (Issue 2).

Acceptance Criteria

• On screens narrower than lg, navigation links move into a sidebar triggered by a hamburger button
• The sidebar slides in from the left with a CSS transition of approximately 200 ms
• Clicking the backdrop or pressing Escape closes the sidebar and returns focus to the hamburger button
• All navigation links in the sidebar work correctly and close the sidebar after navigation
• On lg and wider screens, the sidebar is hidden and the horizontal nav is visible regardless of sidebar state
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[Silver36-ship-it]

I would love to work on this professionally, please assign it to me

[Netty-kun]

@Netty-kun has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Maintainer, I'd be glad to handle this issue. I've reviewed the requirements and am confident in the implementation. I'll start immediately if assigned, provide progress updates, and submit a well-tested PR without unnecessary delay.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Netty-kun to this issue.

[gitGolf]

@gitGolf has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I'd love to work on this task.
Please assign it to me, Thank you!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @gitGolf to this issue.

[Nuwe10]

@Nuwe10 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I will like to work on this please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nuwe10 to this issue.

[muhammadawwalabubakar1-oss]

@muhammadawwalabubakar1-oss has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello Maintainer, I've reviewed the issue and I'm confident I can implement a responsive mobile sidebar with smooth transitions, proper focus management, and keyboard accessibility while preserving the existing desktop navigation. I'll ensure all acceptance criteria are met and that the implementation passes all CI checks.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @muhammadawwalabubakar1-oss to this issue.

[drips-wave]

Congratulations, @Nuwe10! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Nuwe10: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Nuwe10's PR #545 was approved and merged by @Kingsman-99.

🏆 @Nuwe10: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (96 total points). Track your full progress on GrantFox.

👏 Great work, @Nuwe10! Keep contributing to Stellar-split.

[drips-wave]

This issue has been completed by @Nuwe10 as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Nuwe10: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

[drips-wave]

This issue has been completed by @Nuwe10 as part of the Stellar Wave Program's 7th Wave 🥳

😎 @Nuwe10: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.