Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add nav links to home page #469

Merged
merged 1 commit into from
Aug 18, 2023
Merged

Add nav links to home page #469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 51 additions & 4 deletions packages/frontend/src/view/components/page/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@ import { SearchBar } from '../SearchBar'

interface NavbarProps {
readonly context: PageContext
readonly searchBar: boolean
readonly showSearchBar: boolean
readonly showNavLinks?: boolean
}

export function Navbar({ searchBar = true, context }: NavbarProps) {
export function Navbar({
showSearchBar = true,
showNavLinks = false,
context,
}: NavbarProps) {
const { user, instanceName, tradingMode, chainId } = context
const isMainnet = chainId === 1
return (
<div className="border-b border-zinc-800">
<nav className="mx-auto flex h-16 max-w-[1440px] items-center justify-between gap-y-2 px-6 py-2.5">
<nav className="relative mx-auto flex h-16 max-w-[1440px] items-center justify-between gap-y-2 px-6 py-2.5">
<a
className="flex items-center justify-center gap-2 divide-x sm:gap-4"
href="/"
Expand All @@ -30,8 +35,11 @@ export function Navbar({ searchBar = true, context }: NavbarProps) {
{instanceName.toUpperCase()} {isMainnet ? '' : 'TESTNET'} EXPLORER
</span>
</a>
{showNavLinks && (
<NavLinks showL2Transactions={context.showL2Transactions} />
)}
<div className="flex gap-x-4 gap-y-2">
{searchBar && (
{showSearchBar && (
<SearchBar
tradingMode={tradingMode}
className="hidden w-auto min-w-[515px] lg:flex"
Expand Down Expand Up @@ -78,3 +86,42 @@ export function Navbar({ searchBar = true, context }: NavbarProps) {
</div>
)
}

function NavLinks({ showL2Transactions }: { showL2Transactions: boolean }) {
const navItems = [
...(showL2Transactions
? [{ href: '/l2-transactions', title: 'Transactions' }]
: []),
{ href: '/state-updates', title: 'State updates' },
{
href: '/forced-transactions',
title: 'Forced transactions',
},
{ href: '/offers', title: 'Offers' },
]

return (
<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform items-center xl:flex">
{navItems.map((item) => {
return <NavLink key={item.title} href={item.href} title={item.title} />
})}
</div>
)
}
interface NavLinkProps {
href: string
title: string
}

function NavLink({ href, title }: NavLinkProps) {
return (
<a
className={
'px-3 py-2 text-md font-semibold transition-colors hover:text-brand'
}
href={href}
>
{title}
</a>
)
}
7 changes: 6 additions & 1 deletion packages/frontend/src/view/components/page/Page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { Navbar } from './Navbar'
interface Props {
context: PageContext | PageContextWithUser
withoutSearch?: boolean
showNavLinks?: boolean
description: string
image?: string
baseTitle?: string
Expand Down Expand Up @@ -46,7 +47,11 @@ export function Page(props: Props) {
/>
<body className="flex h-full flex-col">
{isPreview && <BreakpointIndicator />}
<Navbar searchBar={!props.withoutSearch} context={props.context} />
<Navbar
showSearchBar={!props.withoutSearch}
showNavLinks={props.showNavLinks}
context={props.context}
/>
<FreezeBanner freezeStatus={props.context.freezeStatus} />
<GradientBackground />
{props.children}
Expand Down
1 change: 1 addition & 0 deletions packages/frontend/src/view/pages/home/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ function HomePage(props: HomePageProps) {
description="This explorer allows you to view everything happening on dYdX from the perspective of the Ethereum blockchain. Browse positions, forced transaction and submit your own forced trades and withdrawals."
context={props.context}
withoutSearch
showNavLinks
>
<ContentWrapper className="!max-w-[1340px]">
<div className="flex flex-col gap-8">
Expand Down