Enhancing the navigation component
We are nearly done with the UI, which will allow us to add our first real functionality with Supabase in the next chapter. However, there’s one thing that’s annoying – the navigation items don’t visually reflect the active route. They look slightly highlighted when you click them, but this is only because the item has focus after being clicked. When you click anywhere else on the page, the item loses focus and its visual highlight; we want the active navigation item to stay highlighted.
In Pico.css, you can make a link stand out by giving it the contrast class and role="button". We can use this to mark an active route in a navigation item as active. Hence, you need to adapt your app/tickets/Nav.js file slightly.
To be able to check which link is active, we will import the usePathname() from next/navigation, which will tell us the active pathname of the URL. This only works in client components, so we need...
