add nav links to home page (#469)

l2beat · Aug 18, 2023 · bf338f1 · bf338f1
1 parent 4f8b178
commit bf338f1
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 5 deletions.
diff --git a/packages/frontend/src/view/components/page/Navbar.tsx b/packages/frontend/src/view/components/page/Navbar.tsx
@@ -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="/"
@@ -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"
@@ -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>
+  )
+}
diff --git a/packages/frontend/src/view/components/page/Page.tsx b/packages/frontend/src/view/components/page/Page.tsx
@@ -11,6 +11,7 @@ import { Navbar } from './Navbar'
 interface Props {
   context: PageContext | PageContextWithUser
   withoutSearch?: boolean
+  showNavLinks?: boolean
   description: string
   image?: string
   baseTitle?: string
@@ -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}

diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx
@@ -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">