FunctionProject/website/components/Header/NavigationLink.jsx

import Link from 'next/link'
import { useRouter } from 'next/router'
import './Header.css'

export default function NavigationLink (props) {
  const { pathname } = useRouter()

  return (
    <li className='navbar-item'>
      <Link href={props.path}>
        <a
          className={`navbar-link ${
            pathname === props.path ? 'navbar-link-active' : null
          }`}
        >
          {props.name}
        </a>
      </Link>
    </li>
  )
}