Improve Navbar UI/UX Design of the website

[yuvraj-k-singh]

📝 Description

Redesign the navbar with a cleaner and more modern interface by improving layout, responsiveness, hover effects, active states, animations, and theme compatibility. The updated navbar should provide smooth navigation and maintain visual consistency across the website.

🎨 What’s New in the Design?

• Floating Island Component: Instead of stretching awkwardly edge-to-edge, the navbar now floats slightly below the top of the viewport with clean geometric edges (border-radius: 24px), custom inner subtle borders, and an elegant frosted-glass blur background (backdrop-filter: blur(16px)).
• Scroll Reactivity: Added a smooth scroll event listener. When a user scrolls down the page, the navbar effortlessly squeezes inwards slightly (max-width: 1140px) and adapts its height so it doesn't hog valuable vertical reading space.
• Micro-interactions: Added clean hover effects on the system utilities (Sound and Theme switch) including a subtle translateY hover liftoff.
• Neon Glow Focus: The inset search bar features an interactive capsule transition that dynamically expands background contrast and casts a subtle neon green shadow glow when active.

📱 Smooth Mobile Responsiveness

• Fixed the old bug where the search box dropped to a clunky third row and covered up hero content on small viewports.
• On mobile/tablet widths, search scales down cleanly to absolute screen edges, while the controls gently fold away into an isolated slide-out panel menu drawer triggered by a compact hamburger icon.

🌗 Parity with Light Mode

• Fully adapted all new floating design properties using the project's native [data-theme="light"] selectors so that flipping the switch gracefully transitions the glass morph variables into a clean slate-white palette with high readability contrast.

---

🔗 Linked Issue

Closes #444

---

📋 Contribution Checklist

• My code strictly adheres to the project guidelines (Standard library only, procedural code, clean spacing).
• I have verified that my files are placed in the correct directory.
• I have tested my changes thoroughly on my local machine.
• I have included interactive emojis and clean console/UI outputs.
• GSSoC 2026: I have been formally assigned to this issue and noted it above.

[vercel]

@yuvraj-k-singh is attempting to deploy a commit to the Anuj's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🎉 Thank you for your contribution!

Your Pull Request has been merged successfully.

We appreciate the time and effort you put into improving this project. Contributions like yours help the repository grow and stay useful for everyone.

If you'd like to contribute again, please check the open issues and make sure you are assigned before opening another Pull Request.

Thanks again for your support! 🙌