enhancement: Abstract SectionNav Mobile/Desktop Logic

[Aditya8369]

• Description: The SectionNav component in App.jsx (old version) contains significant conditional logic to render different layouts for mobile and desktop. This increases complexity.
• Fix/Enhancement: Refactor SectionNav to use CSS media queries for layout changes instead of JavaScript-based rendering. This simplifies the component, improves performance by reducing re-renders on viewport changes, and aligns with modern responsive design principles

[github-actions]

👋 Thank you @Aditya8369 for opening this issue!

We appreciate you taking the time to report or suggest an improvement for Pollution Control Hub.

Our maintainers will review your issue as soon as possible.

Meanwhile, please ensure:

• 📌 The issue clearly describes the problem or feature request.
• 📝 Steps to reproduce (if it's a bug) are included.
• 📷 Screenshots or logs are attached when applicable.
• 🔍 The issue is not a duplicate of an existing one.

Thank you for contributing to the project! 🚀

[sanskarcoder29]

Hii, please assign this issue to me under ecsoc26

[github-actions]

Issue is assigned to you, @sanskarcoder29! 🎯

⏳ Note: Please submit a working PR within 3 days, else the issue will be unassigned and open for other contributors. 🚀

[github-actions]

@sanskarcoder29 👋 Friendly Reminder: This issue was assigned 2 days ago. Please submit a working PR or update within 24 hours, or the issue will be automatically unassigned. ⏳

[github-actions]

This issue has been automatically unassigned from @sanskarcoder29 due to 3 days of inactivity. It is now open for other contributors! 🚀

[SrinivasaKamathB]

Hi @Aditya8369, I would like to work on this issue under ECSoC26. Please assign this issue to me. I’ll implement and test the responsive SectionNav changes and submit a PR.