Feat: Implement Dynamic Nav with Animated Active Indicator#2
Open
Typecaster12 wants to merge 2 commits intoAyushAwasthi2384:masterfrom
Open
Feat: Implement Dynamic Nav with Animated Active Indicator#2Typecaster12 wants to merge 2 commits intoAyushAwasthi2384:masterfrom
Typecaster12 wants to merge 2 commits intoAyushAwasthi2384:masterfrom
Conversation
|
@Typecaster12 is attempting to deploy a commit to the ayushawasthi2384's projects Team on Vercel. A member of the Team first needs to authorize it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey,
This PR introduces a couple of nice improvements to the main header navigation to make it more modern and user-friendly.
Closes #1
What's New?
I noticed the navigation bar was built with static links and didn't give clear feedback on which page was active. This PR addresses that by:
Making the Nav Dynamic: The list of links is now an array that gets mapped over. This makes it much cleaner and easier to add or remove links in the future.
Adding an Animated Indicator: A slick, animated underline now appears beneath the active link. It smoothly slides from one link to the next as you navigate, which adds a really polished feel to the UI.
How It's Done
Refactored the static links into a navLinks array.
Added the framer-motion library to handle the animation.
Used the layoutId prop on a motion.div to create the "magic" sliding underline effect.