Where Am I?

When a shop has several pages, the visitor wants to see where they are. The header's links are plain Links, so they look the same on every page.

NavLink is a Link that compares its to with the address. When they match, the link is active: it gets aria-current="page", which the check prints as (current), and a class for the stylesheet. On a blog, this link is current at /posts and gets the class active by default:

<NavLink to="/posts">Posts</NavLink>

You can choose the class yourself: give className a function. NavLink calls it with { isActive } and uses what it returns as the class. The given src/styles.css makes nav a gray and nav a.current black and bold, so your function must return "current" for the active link.

Your header must give:

open /cart        →  link: Products -> /
                     link: Cart -> /cart (current)   color: black, font-weight: bold  <- nav a.current
click "Products"  →  link: Products -> / (current)   color: black  <- nav a.current
                     link: Cart -> /cart             color: gray   <- nav a
press Back        →  link: Cart -> /cart (current) again

Your task: in src/Header.jsx, write linkClass, which returns "current" for the active link and an empty string otherwise, and put two NavLinks in the nav that use it.

Assignment
Follow the Coding Tutorial to mark the current page in the header with NavLink and a class function.

Hint
A ternary picks one of two values: condition ? "yes" : "no". Pass the function itself, className={linkClass}, without calling it.