2022-03-14 13:18:11 +00:00
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
import { Vega } from '../icons/vega';
|
|
|
|
import Link from 'next/link';
|
2022-06-08 08:47:31 +00:00
|
|
|
import { t } from '@vegaprotocol/react-helpers';
|
2022-06-24 03:16:01 +00:00
|
|
|
import classNames from 'classnames';
|
2022-03-14 13:18:11 +00:00
|
|
|
|
|
|
|
export const Navbar = () => {
|
|
|
|
return (
|
|
|
|
<nav className="flex items-center">
|
|
|
|
<Link href="/" passHref={true}>
|
2022-07-07 11:01:03 +00:00
|
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
2022-03-14 13:18:11 +00:00
|
|
|
<a className="px-[26px]">
|
2022-07-14 16:03:17 +00:00
|
|
|
<Vega className="fill-white" />
|
2022-03-14 13:18:11 +00:00
|
|
|
</a>
|
|
|
|
</Link>
|
2022-06-08 08:47:31 +00:00
|
|
|
{[
|
|
|
|
{ name: t('Trading'), path: '/markets' },
|
|
|
|
{ name: t('Portfolio'), path: '/portfolio' },
|
|
|
|
].map((route) => (
|
2022-03-14 13:18:11 +00:00
|
|
|
<NavLink key={route.path} {...route} />
|
|
|
|
))}
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
interface NavLinkProps {
|
|
|
|
name: string;
|
|
|
|
path: string;
|
|
|
|
exact?: boolean;
|
2022-06-06 16:19:56 +00:00
|
|
|
testId?: string;
|
2022-03-14 13:18:11 +00:00
|
|
|
}
|
|
|
|
|
2022-06-08 08:47:31 +00:00
|
|
|
const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
|
2022-03-14 13:18:11 +00:00
|
|
|
const router = useRouter();
|
|
|
|
const isActive =
|
|
|
|
router.asPath === path || (!exact && router.asPath.startsWith(path));
|
2022-06-24 03:16:01 +00:00
|
|
|
const linkClasses = classNames(
|
|
|
|
'px-16 py-6 border-0 self-end',
|
|
|
|
'uppercase xs:text-ui sm:text-body-large md:text-h5 lg:text-h4',
|
|
|
|
{
|
|
|
|
'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black': isActive,
|
2022-07-14 16:03:17 +00:00
|
|
|
'text-white': !isActive,
|
2022-06-24 03:16:01 +00:00
|
|
|
}
|
|
|
|
);
|
2022-03-14 13:18:11 +00:00
|
|
|
return (
|
2022-06-24 03:16:01 +00:00
|
|
|
<Link data-testid={testId} href={path} passHref={true}>
|
2022-07-07 11:01:03 +00:00
|
|
|
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
|
2022-06-24 03:16:01 +00:00
|
|
|
<a className={linkClasses}>{name}</a>
|
|
|
|
</Link>
|
2022-03-14 13:18:11 +00:00
|
|
|
);
|
|
|
|
};
|