[Feat]: Add Hamburger Menu for Small Screen Sizes and Progress Bar

[srishti023]

Feature Description

hamburger menu and progress bar for small screen sizes in every page

Provide a detailed description of the feature

I would like to enhance the website's mobile experience by implementing a hamburger menu in the header for small screen sizes. This will help streamline navigation and provide a cleaner interface on mobile devices.

Additionally, I propose to add a progress bar that visually indicates page loading and scrolling progress. This feature will improve user engagement and help visitors track their browsing experience.

Hamburger Menu:

Implement a responsive hamburger menu that appears in the header for screens smaller than. Ensure the menu includes links to all main sections of the website.

Progress Bar:

Add a progress bar at the top of the page that reflects loading and scrolling progress. Design the progress bar to match the existing UI of the website.

Expected Outcome:

Improved mobile navigation through the hamburger menu.
Enhanced user experience with the addition of the progress bar.

Put here any screenshots or videos (optional)

Current website

By submitting this issue, you agree to

• I agree to follow this project's Code of Conduct
• I’ve read all the issues in the issue section, and this feature has not been proposed yet.

Other Information

• I'm a GSSoC '24 Extended contributor
• I'm a Hacktoberfest '24 contributor
• I am willing to work on this feature (optional)

[github-actions]

@srishti023

Thank you for raising this issue! 🎉🙌

We truly appreciate your contribution to this project and will review the details shortly. 🛠️✨
We will get back to you soon!

Thank you for your patience! 🙏