Add persistent bottom navigation bar for mobile users

[Akatenvictor]

What

Implement a fixed bottom navigation bar on mobile viewports (< 768px) with Home, Explore, Library, and Profile tabs that persist across all routes.

Why

Mobile users currently rely on hamburger menus or header links, which creates friction for core navigation flows. A bottom nav is the standard mobile pattern and reduces navigation effort to a single tap.

Scope

In: Bottom nav component, active route highlighting, responsive breakpoint at 768px, safe-area-inset padding for notched devices
Out: Desktop sidebar redesign, new route pages

Acceptance Criteria

• Bottom nav visible only below 768px breakpoint
• Active tab highlighted based on current route via usePathname
• Hides during full-screen playback mode
• Respects safe-area-inset-bottom for iPhone notch
• No layout shift on desktop when nav mounts/unmounts

Technical Context

• Uses next/navigation for route detection
• Should be added to app/layout.tsx alongside existing header
• Consider lazy rendering to avoid hydration mismatch on SSR pages

[Abba073]

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

Hi maintainer, i would like to work on this issue

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

[Obaara293]

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

Hi maintainer, I've reviewed the issue and I've recognized the solution, kindly assign this to me to get the best result.

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

[Roseline-d]

@Roseline-d has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Please can I work on this ?

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

[Gabbydunkk]

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

pls assign

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

[drips-wave]

Congratulations, @Gabbydunkk! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @Gabbydunkk: 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 🌊