navbar - toggle icons, when the according page is chosen

[DorisW3]

Hey everyone,

I currently do some styling in my project and struggle with adding a feature to the navbar. When a navbar icon is clicked there should be another icon, as long as the user is on the according page. The present code doesn't work (at first, I tried it only with the favorite page), but I don't know why.

I searched in the discussion board and the internet for similar problems, but couldn't find something. Can anyone please help?

Here is the PR: DorisW3/capstone-project#18

Thank you :-)

[Kheirah]

In Navbar.js you drop the isActive prop since you're not using it. Instead you define what the children of the StyledLink should be by checking for the current pathname. If it matches the "/favorites" string you show the filled star and the unfilled otherwise. You had a typo here as well; it's "favorites" with the "s" in the end.

<StyledLink href={"/favorites"}>
  {router.pathname === "/favorites" ? <FilledStar /> : <Star />}
</StyledLink>

[DorisW3]

Thank you, it works!