feat: add governance link to navbar (#1852)

apps/trading/components/navbar/navbar.tsx

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { NetworkSwitcher } from '@vegaprotocol/environment';
+import { NetworkSwitcher, useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import { useGlobalStore } from '../../stores/global';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
 import { Vega } from '../icons/vega';
+import type { HTMLAttributeAnchorTarget } from 'react';
 import { useEffect, useState } from 'react';
 
 interface NavbarProps {
@@ -15,18 +16,21 @@ interface NavbarProps {
 }
 
 export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
+  const { VEGA_TOKEN_URL } = useEnvironment();
   const { marketId } = useGlobalStore((store) => ({
     marketId: store.marketId,
   }));
   const [tradingPath, setTradingPath] = useState('/markets');
+
   useEffect(() => {
     if (marketId) {
       setTradingPath(`/markets/${marketId}`);
     }
   }, [marketId]);
+
   return (
     <div className="dark px-4 flex items-stretch border-b border-default bg-black text-white">
-      <div className="flex gap-4 mr-4 items-center h-full">
+      <div className="flex gap-4 items-center h-full">
         <Link href="/" passHref={true}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
           <a>
@@ -35,13 +39,19 @@ export const Navbar = ({ theme, toggleTheme }: NavbarProps) => {
         </Link>
         <NetworkSwitcher />
       </div>
-      <nav className="flex items-center">
+      <nav className="flex items-center flex-1 px-2">
-        <NavLink key={'trading'} name={t('Trading')} path={tradingPath} />
+        <NavLink name={t('Trading')} path={tradingPath} />
-        <NavLink key={'portfolio'} name={t('Portfolio')} path={'/portfolio'} />
+        <NavLink name={t('Portfolio')} path="/portfolio" />
+        <NavLink
+          name={t('Governance')}
+          path={`${VEGA_TOKEN_URL}/governance`}
+          alignRight={true}
+          target="_blank"
+        />
       </nav>
       <div className="flex items-center gap-2 ml-auto">
-        <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
         <VegaWalletConnectButton />
+        <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
       </div>
     </div>
   );
@@ -51,23 +61,33 @@ interface NavLinkProps {
   name: string;
   path: string;
   testId?: string;
+  alignRight?: boolean;
+  target?: HTMLAttributeAnchorTarget;
 }
 
-const NavLink = ({ name, path, testId = name }: NavLinkProps) => {
+const NavLink = ({
+  name,
+  path,
+  alignRight,
+  target,
+  testId = name,
+}: NavLinkProps) => {
   const router = useRouter();
-  const [isActive, setIsActive] = useState(false);
+  const isActive = router.asPath?.includes(path);
-  useEffect(
+  const linkClasses = classNames('mx-2 py-3 self-end relative', {
-    () => setIsActive(router.asPath.includes(path)),
+    'text-white cursor-default': isActive,
-    [path, router.asPath]
+    'text-neutral-400 hover:text-neutral-300': !isActive,
-  );
+    'ml-auto': alignRight,
-  const linkClasses = classNames('mx-2 py-2 self-end border-b-4', {
-    'border-vega-yellow text-white cursor-default': isActive,
-    'border-transparent text-neutral-400 hover:text-neutral-300': !isActive,
   });
   return (
     <Link data-testid={testId} href={path} passHref={true}>
       {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a className={linkClasses}>{name}</a>
+      <a className={linkClasses} target={target}>
+        {name}
+        {isActive && (
+          <span className="absolute h-1 w-full bg-vega-yellow bottom-0 left-0" />
+        )}
+      </a>
     </Link>
   );
 };