feat: Add NavLink component with dynamic className support

[manuelbento19]

What feature?

Description

Currently, I am proposing to add a NavLink component to the project with support for defining className dynamically. This will allow for greater flexibility in styling links based on different conditions.

Proposed Implementation Details

The NavLink component will be developed with the following characteristics:

• Will extend Next.js LinkProps props.
• Will include support for dynamic className, which can be a static string or a function that returns a CSS class string.
• Will use usePathname (or equivalent functionality) to determine whether the link is active, applying the appropriate CSS class based on the current URL.

Example of use

import NavLink from 'components/NavLink';

<NavLink href="/dashboard" className={(active) => active ? 'active-link' : 'inactive-link'}>
  Dashboard
</NavLink>

Add screenshots

Record

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I agree to follow this project's Code of Conduct
• [X] I want to work on this issue

[github-actions[bot]]

To reduce notifications, issues are locked. Your issue will be unlock when we will add label as 🏁 status: ready for dev. Check out the contributing guide for more information.