Added "Scroll down progress bar"

[MastanSayyad]

Hey @mdazfar2 | closes #608

I have added the "Scroll down progress bar" to the website

Changes I made:

• Created progress.js file
• Included logic to reset the scroll progress on page navigation using Next.js's usePathname hook.
• Added CSS in global.css

This improves navigation efficiency and overall user experience, particularly on lengthy pages.

(Note: if we try to match background theme then the bar leads to blending issue so tried to use closest color as possible)

https://github.com/mdazfar2/HelpOps-Hub/assets/101971980/19f4d4ff-ea9c-4f73-a282-250fec3c99c8

Please review the changes and consider merging this pull request, Also I request you to add level 2 label if possible, Thank You!!

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
helpops-hub2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 25, 2024 4:38pm

[github-actions[bot]]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[mdazfar2]

hey @MastanSayyad it doesn't looks good as usual could you remove these all changes and try to change the color of this one:

[MastanSayyad]

its Vertical Scroll-bar @mdazfar2

[MastanSayyad]

@mdazfar2 okay got it, you mean remove the progress bar and adjust the color of vertical scroll-bar

[mdazfar2]

@mdazfar2 okay got it, you mean remove the progress bar and adjust the color of vertical scroll-bar

yes @MastanSayyad and also try to add comment which and where you changes and why

[MastanSayyad]

@mdazfar2 done the changes

https://github.com/mdazfar2/HelpOps-Hub/assets/101971980/badcd8bb-5d31-4e6f-b151-42450de9b919

[mdazfar2]

@MastanSayyad in dark mode it doesn't change

[MastanSayyad]

which browser are you using? @mdazfar2

[mdazfar2]

@MastanSayyad Edge

[MastanSayyad]

@mdazfar2 ensure you clear your browser cache , in chrome browser it works fine, still I'll try to customize it for edge compatibilty

[MastanSayyad]

@mdazfar2 this should work fine, if not then try chrome browser

[mdazfar2]

@mdazfar2 this should work fine, if not then try chrome browser

@MastanSayyad It is also doesn't work in chrome

[MastanSayyad]

In only dark mode right?

[mdazfar2]

@MastanSayyad yes

[MastanSayyad]

okay, got it!

[MastanSayyad]

@mdazfar2 this should work fine