new modern Navbar with capsule follow active page

[itznayan]

What feature would you like to see? I would like to see a navigation bar that has a capsule-like effect (or highlight) that follows the active page link. This could be achieved using framer-motion to animate the capsule as the user navigates between different sections of the website. The capsule would smoothly transition and resize based on the active NavLink.

Why is this feature useful? This feature would improve user experience by visually indicating the active page in an elegant and animated way. It makes the navigation more interactive and visually appealing, providing a more modern and engaging UI. Users would have a clear visual cue as to which page they are currently on.

How important is this feature to you? Must have

Have you seen this feature in other projects? Yes, I've seen something similar elsewhere

Any other details? The capsule could change both its position and dimensions to perfectly fit each NavLink as the user interacts with the navigation bar. This feature could be implemented with framer-motion in React, which would handle the smooth transitions. It could also involve customization options for the color, duration of the transition, and easing effects.

Your experience level with this project: I'm experienced in this kind of project

Would you like to work on this feature? Yes, I'd like to try implementing this feature

https://github.com/user-attachments/assets/a6f6879e-443e-4513-84d1-8aad1d1fb78b

[aswathcm29]

Hey @itznayan ! It's looks good and I'm assigning it to you ! Make sure to follow the theme of the application

[itznayan]

@aswathcm29 check please approve pr .i have added framer motion.

https://github.com/user-attachments/assets/e0ddecc9-53c9-4ad8-b915-1fef2707c8de