it is supposed to set bold text on anchor tag but not setting it, not only that it is also removing the first string. can someone please help and explain?
<a className={'mr-5 hover:text-gray-900 '+ router.pathname == '/' ? 'font-bold':''} WebSite </a>
In the comparison what is happening is: first a concat with the text mr-5 hover:text-gray-900 with the router.pathname and then comparing with the /, which will return always false.
In order to fix the issue you need to wrap the ternary in parenthesis:
<a className={'mr-5 hover:text-gray-900 '+ (router.pathname == '/' ? 'font-bold' : '')}> WebSite </a>