feat(trading): update navbar

This commit is contained in:
Madalina Raicu 2024-02-01 19:59:39 +00:00
parent f5406941e7
commit 7777420f1f
No known key found for this signature in database
GPG Key ID: 688B7B31149C1DCD
2 changed files with 16 additions and 19 deletions

View File

@ -34,13 +34,7 @@ import { supportedLngs } from '../../lib/i18n';
type MenuState = 'wallet' | 'nav' | null;
type Theme = 'system' | 'yellow';
export const Navbar = ({
children,
theme = 'system',
}: {
children?: ReactNode;
theme?: Theme;
}) => {
export const Navbar = ({ theme = 'system' }: { theme?: Theme }) => {
const i18n = useI18n();
const t = useT();
// menu state for small screens
@ -75,8 +69,6 @@ export const Navbar = ({
>
<VLogo className="w-4" />
</NavLink>
{/* Left section */}
<div className="flex items-center lg:hidden">{children}</div>
{/* Used to show header in nav on mobile */}
<div className="hidden lg:block">
<NavbarMenu onClick={() => setMenu(null)} />

View File

@ -33,6 +33,7 @@ import { PartyActiveOrdersHandler } from './party-active-orders-handler';
import { MaybeConnectEagerly } from './maybe-connect-eagerly';
import { TransactionHandlers } from './transaction-handlers';
import { useT } from '../lib/use-t';
import { useScreenDimensions } from '@vegaprotocol/react-helpers';
const Title = () => {
const t = useT();
@ -64,6 +65,8 @@ function AppBody({ Component }: AppProps) {
'grid relative h-full z-0',
'grid-rows-[repeat(3,min-content),minmax(0,1fr)]'
);
const { isMobile } = useScreenDimensions();
return (
<div className="h-full overflow-hidden">
<Head>
@ -73,16 +76,18 @@ function AppBody({ Component }: AppProps) {
<Title />
<div className={gridClasses}>
<AnnouncementBanner />
<Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'}>
<Routes>
<Route
path={AppRoutes.MARKETS}
// render nothing for markets/all, otherwise markets/:marketId will match with markets/all
element={null}
/>
<Route path={AppRoutes.MARKET} element={<NavHeader />} />
</Routes>
</Navbar>
<Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
<Routes>
<Route
path={AppRoutes.MARKETS}
// render nothing for markets/all, otherwise markets/:marketId will match with markets/all
element={null}
/>
<Route
path={AppRoutes.MARKET}
element={isMobile ? <NavHeader /> : null}
/>
</Routes>
<div data-testid="banners">
<ProtocolUpgradeProposalNotification
mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}