Fix Solved : Mobile navbar overlaps hero section content on smaller screens

[Vamshavardhan50]

🔍 Description

• Replaced the mobile dropdown menu with an off‑canvas drawer to stop hero overlap.
• Added a dimmed backdrop behind the drawer and click‑to‑close behavior.
• Added a close button (X icon) inside the drawer and Esc‑to‑close support.
• Locked body scroll while the drawer is open.
• Closed the drawer automatically when a nav link is clicked.
• Added focus‑trap + focus‑restore for accessibility.
• Added a staggered slide‑in animation for mobile nav items.

Closes #302

🎨 Visual Changes

• Mobile screenshots (menu closed / menu open with backdrop)

• Short screen recording showing open/close + Esc close

Screen.Recording.2026-05-15.115953.mp4

---

🧩 Additional Notes for Reviewers

• Main UI changes:
  • app/(core)/components/Header.jsx/components/Header.jsx)
  • app/(core)/components/Nav.tsx/components/Nav.tsx)
  • app/(core)/styles/index.css/styles/index.css)
• Tooling fixes to pass lint‑staged:
  • eslint.config.mjs — use FlatCompat for Next configs
  • pre-commit — removed deprecated Husky shim lines

---

[mattqdev]

Thank you for this! I really love it!

[physicshub]

🎉 This PR is included in version 3.28.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀