import { useState } from 'react'; import classNames from 'classnames'; import { NavLink, Link } from 'react-router-dom'; import { DApp, NetworkSwitcher, TOKEN_GOVERNANCE, useLinks, } from '@vegaprotocol/environment'; import { t } from '@vegaprotocol/react-helpers'; import { useGlobalStore } from '../../stores'; import { VegaWalletConnectButton } from '../vega-wallet-connect-button'; import { Drawer, getNavLinkClassNames, getActiveNavLinkClassNames, Nav, NewTab, ThemeSwitcher, } from '@vegaprotocol/ui-toolkit'; import { Vega } from '../icons/vega'; import type { HTMLAttributeAnchorTarget } from 'react'; import { Links, Routes } from '../../pages/client-router'; type NavbarTheme = 'inherit' | 'dark' | 'yellow'; interface NavbarProps { navbarTheme?: NavbarTheme; } const LinkList = ({ navbarTheme, className = 'flex', dataTestId = 'navbar-links', onNavigate, }: { navbarTheme: NavbarTheme; className?: string; dataTestId?: string; onNavigate?: () => void; }) => { const tokenLink = useLinks(DApp.Token); const { marketId } = useGlobalStore((store) => ({ marketId: store.marketId, })); const tradingPath = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.MARKET](); return (
{t('Governance')}
); }; const MobileMenuBar = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => { const [drawerOpen, setDrawerOpen] = useState(false); const [container, setContainer] = useState(null); const menuButton = ( ); return (
setDrawerOpen(false)} />
); }; export const Navbar = ({ navbarTheme = 'inherit' }: NavbarProps) => { const titleContent = (
); return ( ); }; interface AppNavLinkProps { name: string; path: string; navbarTheme: NavbarTheme; testId?: string; target?: HTMLAttributeAnchorTarget; end?: boolean; onClick?: () => void; } const AppNavLink = ({ name, path, navbarTheme, target, testId = name, end, onClick, }: AppNavLinkProps) => { const borderClasses = classNames( 'absolute h-[2px] md:h-1 w-full bottom-[-1px] left-0', { 'bg-black dark:bg-vega-yellow': navbarTheme !== 'yellow', 'bg-black dark:bg-vega-yellow md:dark:bg-black': navbarTheme === 'yellow', } ); return ( {({ isActive }) => { return ( <> {name} {isActive && } ); }} ); };