Add Scroll Progress Indicator to Navbar - #1214

Description

This PR implements a Scroll Progress Indicator in the Navbar for better user experience on long pages.

Users now have a clear visual indication of how much content they have read or scrolled through.

Changes Made

• Added real-time scroll progress calculation using useEffect and window.scroll event listener.
• Implemented a thin elegant progress bar at the top of the navbar (h-0.5).
• Used gradient styling (from-purple-600 via-cyan-500 to-purple-600) to match the existing design system.
• Added smooth animation with transition-all duration-200.
• Optimized performance using { passive: true } listener.
• Fully responsive and works across all devices and pages.

Type of Change

• New feature (non-breaking change which adds functionality)

Related Issue

Closes #1178

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have tested the changes on multiple screen sizes (desktop + mobile)

Additional Notes

• The progress bar is placed inside the fixed navbar and respects the existing z-50 stacking.
• No existing functionality or styling was broken.
• Minimal performance impact.