add navlinks to navbar

l2beat · Aug 3, 2023 · b9b764e · b9b764e
1 parent dc88215
commit b9b764e
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 5 deletions.
diff --git a/packages/frontend/src/view/components/page/NavLink.tsx b/packages/frontend/src/view/components/page/NavLink.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames'
+import React from 'react'
+
+interface NavLinkProps {
+  href: string
+  title: NavLinkTitle
+  isSelected: boolean
+}
+
+export type NavLinkTitle =
+  | 'Home'
+  | 'State updates'
+  | 'Live transactions'
+  | 'Forced transactions'
+  | 'Offers'
+
+export function NavLink({ href, title, isSelected }: NavLinkProps) {
+  return (
+    <a
+      className={classNames(
+        'px-3 py-2 text-md font-semibold transition-colors hover:text-brand',
+        isSelected && 'text-brand'
+      )}
+      href={href}
+    >
+      {title}
+    </a>
+  )
+}
diff --git a/packages/frontend/src/view/components/page/Navbar.tsx b/packages/frontend/src/view/components/page/Navbar.tsx
@@ -6,18 +6,21 @@ import { L2BeatMinimalLogo } from '../../assets/logos/L2BeatMinimalLogo'
 import { ProjectLogo } from '../../assets/logos/ProjectLogo'
 import { Button } from '../Button'
 import { SearchBar } from '../SearchBar'
+import { NavLink, NavLinkTitle } from './NavLink'
 
 interface NavbarProps {
   readonly context: PageContext
   readonly searchBar: boolean
+  readonly path: string
 }
 
-export function Navbar({ searchBar = true, context }: NavbarProps) {
+export function Navbar({ searchBar = true, context, path }: NavbarProps) {
   const { user, instanceName, tradingMode, chainId } = context
   const isMainnet = chainId === 1
+  const navItems = getNavLinks(context.showL2Transactions)
   return (
     <div>
-      <div className="flex h-16 flex-wrap items-center justify-between gap-y-2 border-b border-zinc-800 px-6 py-2.5">
+      <div className="relative flex h-16 flex-wrap items-center justify-between gap-y-2 border-b border-zinc-800 px-6 py-2.5">
         <a
           className="flex items-center justify-center gap-2 divide-x sm:gap-4"
           href="/"
@@ -30,6 +33,23 @@ export function Navbar({ searchBar = true, context }: NavbarProps) {
             {instanceName.toUpperCase()} {isMainnet ? '' : 'TESTNET'} EXPLORER
           </span>
         </a>
+        <div className="absolute top-1/2 left-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform items-center xl:flex">
+          {navItems.map((item) => {
+            const isSelected =
+              path.startsWith(item.href) ||
+              (item.activeOn
+                ? item.activeOn.some((link) => path.startsWith(link))
+                : false)
+            return (
+              <NavLink
+                key={item.title}
+                href={item.href}
+                title={item.title}
+                isSelected={isSelected}
+              />
+            )
+          })}
+        </div>
         <div className="flex flex-wrap gap-y-2 gap-x-4">
           {searchBar && (
             <SearchBar
@@ -67,3 +87,23 @@ export function Navbar({ searchBar = true, context }: NavbarProps) {
     </div>
   )
 }
+
+function getNavLinks(showL2Transactions: boolean) {
+  const navItems: { href: string; title: NavLinkTitle; activeOn?: string[] }[] =
+    [{ href: '/home', title: 'Home' }]
+
+  if (showL2Transactions) {
+    navItems.push({ href: '/l2-transactions', title: 'Live transactions' })
+  }
+
+  navItems.push(
+    { href: '/state-updates', title: 'State updates' },
+    {
+      href: '/forced-transactions',
+      title: 'Forced transactions',
+      activeOn: ['/transactions'],
+    },
+    { href: '/offers', title: 'Offers' }
+  )
+  return navItems
+}
diff --git a/packages/frontend/src/view/components/page/Page.tsx b/packages/frontend/src/view/components/page/Page.tsx
@@ -43,7 +43,11 @@ export function Page(props: Props) {
         stylesheets={props.stylesheets ?? ['/styles/main.css']}
       />
       <body className="flex h-full flex-col">
-        <Navbar searchBar={!props.withoutSearch} context={props.context} />
+        <Navbar
+          searchBar={!props.withoutSearch}
+          context={props.context}
+          path={props.path}
+        />
         <FreezeBanner freezeStatus={props.context.freezeStatus} />
         {props.children}
         <Footer />

diff --git a/packages/frontend/src/view/pages/home/HomePage.tsx b/packages/frontend/src/view/pages/home/HomePage.tsx
@@ -52,7 +52,7 @@ function HomePage(props: HomePageProps) {
 
   return (
     <Page
-      path="/"
+      path="/home"
       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

diff --git a/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx b/packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx
@@ -45,7 +45,7 @@ export function renderStateUpdatePage(props: StateUpdatePageProps) {
 function StateUpdatePage(props: StateUpdatePageProps) {
   return (
     <Page
-      path={`/state-update/${props.id}`}
+      path={`/state-updates/${props.id}`}
       description="Show state update details, including balance changes, transactions and prices"
       context={props.context}
     >