vega-frontend-monorepo/apps/trading/components/navbar/navbar.tsx
Matthew Russell be3b416176
Fix/Default market and tabs navigation (#518)
* fix: dont use localstorage for navigation, remove query params for tabs

* chore: lint

* fix: revert to using url rather than data test id

* chore: lint

* chore: remove arrow down ref from markets page object
2022-06-08 09:47:31 +01:00

47 lines
1.2 KiB
TypeScript

import { useRouter } from 'next/router';
import { Vega } from '../icons/vega';
import Link from 'next/link';
import { AnchorButton } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers';
export const Navbar = () => {
return (
<nav className="flex items-center">
<Link href="/" passHref={true}>
<a className="px-[26px]">
<Vega className="fill-black dark:fill-white" />
</a>
</Link>
{[
{ name: t('Trading'), path: '/markets' },
{ name: t('Portfolio'), path: '/portfolio' },
].map((route) => (
<NavLink key={route.path} {...route} />
))}
</nav>
);
};
interface NavLinkProps {
name: string;
path: string;
exact?: boolean;
testId?: string;
}
const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
const router = useRouter();
const isActive =
router.asPath === path || (!exact && router.asPath.startsWith(path));
return (
<AnchorButton
variant={isActive ? 'accent' : 'inline'}
className="px-16 py-6 h-[38px] uppercase border-0 self-end xs:text-ui sm:text-body-large md:text-h5 lg:text-h4"
data-testid={testId}
href={path}
>
{name}
</AnchorButton>
);
};