fix bug

packages/frontend/src/view/components/page/Navbar.tsx

@@ -11,10 +11,14 @@ import { NavLink, NavLinkTitle } from './NavLink'
 interface NavbarProps {
   readonly context: PageContext
   readonly searchBar: boolean
-  readonly path: string
+  readonly activeNavItem: NavLinkTitle | undefined
 }
 
-export function Navbar({ searchBar = true, context, path }: NavbarProps) {
+export function Navbar({
+  searchBar = true,
+  context,
+  activeNavItem,
+}: NavbarProps) {
   const { user, instanceName, tradingMode, chainId } = context
   const isMainnet = chainId === 1
   const navItems = getNavLinks(context.showL2Transactions)
@@ -35,11 +39,8 @@ export function Navbar({ searchBar = true, context, path }: NavbarProps) {
         </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)
+            const isSelected = item.title === activeNavItem
+
             return (
               <NavLink
                 key={item.title}
@@ -89,8 +90,9 @@ export function Navbar({ searchBar = true, context, path }: NavbarProps) {
 }
 
 function getNavLinks(showL2Transactions: boolean) {
-  const navItems: { href: string; title: NavLinkTitle; activeOn?: string[] }[] =
-    [{ href: '/home', title: 'Home' }]
+  const navItems: { href: string; title: NavLinkTitle }[] = [
+    { href: '/', title: 'Home' },
+  ]
 
   if (showL2Transactions) {
     navItems.push({ href: '/l2-transactions', title: 'Live transactions' })
@@ -101,7 +103,6 @@ function getNavLinks(showL2Transactions: boolean) {
     {
       href: '/forced-transactions',
       title: 'Forced transactions',
-      activeOn: ['/transactions'],
     },
     { href: '/offers', title: 'Offers' }
   )

packages/frontend/src/view/components/page/Page.tsx

@@ -6,9 +6,11 @@ import { Footer } from './Footer'
 import { FreezeBanner } from './FreezeBanner'
 import { Head } from './Head'
 import { Navbar } from './Navbar'
+import { NavLinkTitle } from './NavLink'
 
 interface Props {
   context: PageContext | PageContextWithUser
+  activeNavItem?: NavLinkTitle
   withoutSearch?: boolean
   description: string
   image?: string
@@ -46,7 +48,7 @@ export function Page(props: Props) {
         <Navbar
           searchBar={!props.withoutSearch}
           context={props.context}
-          path={props.path}
+          activeNavItem={props.activeNavItem}
         />
         <FreezeBanner freezeStatus={props.context.freezeStatus} />
         {props.children}

packages/frontend/src/view/pages/home/HomeL2TransactionsPage.tsx

@@ -27,6 +27,7 @@ function HomeL2TransactionsPage(props: HomeL2TransactionsPageProps) {
   return (
     <Page
       path={L2_TRANSACTIONS_TABLE_PROPS.path}
+      activeNavItem="Live transactions"
       description="Live transactions"
       context={props.context}
     >

packages/frontend/src/view/pages/home/HomeOffersPage.tsx

@@ -24,6 +24,7 @@ function HomeOffersPage(props: HomeOffersPageProps) {
   return (
     <Page
       path={OFFER_TABLE_PROPS.path}
+      activeNavItem="Offers"
       description="All available trade offers"
       context={props.context}
     >

packages/frontend/src/view/pages/home/HomePage.tsx

@@ -52,7 +52,8 @@ function HomePage(props: HomePageProps) {
 
   return (
     <Page
-      path="/home"
+      path="/"
+      activeNavItem="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

packages/frontend/src/view/pages/home/HomeStateUpdatesPage.tsx

@@ -27,6 +27,7 @@ function HomeStateUpdatesPage(props: HomeStateUpdatesPageProps) {
   return (
     <Page
       path={STATE_UPDATE_TABLE_PROPS.path}
+      activeNavItem="State updates"
       description="Latest state updates"
       context={props.context}
     >

packages/frontend/src/view/pages/home/HomeTransactionsPage.tsx

@@ -27,6 +27,7 @@ function HomeTransactionsPage(props: HomeTransactionsPageProps) {
   return (
     <Page
       path={FORCED_TRANSACTION_TABLE_PROPS.path}
+      activeNavItem="Forced transactions"
       description="All forced transactions"
       context={props.context}
     >

packages/frontend/src/view/pages/l2-transaction/PerpetualL2TransactionDetailsPage.tsx

@@ -40,6 +40,7 @@ export function PerpetualL2TransactionDetailsPage(
   return (
     <Page
       context={props.context}
+      activeNavItem="Live transactions"
       description={`Details of ${l2TransactionTypeToText(
         props.transaction.originalTransaction.type
       )} l2 transaction`}

packages/frontend/src/view/pages/state-update/StateUpdatePage.tsx

@@ -46,6 +46,7 @@ function StateUpdatePage(props: StateUpdatePageProps) {
   return (
     <Page
       path={`/state-updates/${props.id}`}
+      activeNavItem="State updates"
       description="Show state update details, including balance changes, transactions and prices"
       context={props.context}
     >

packages/frontend/src/view/pages/transaction/OfferAndForcedTradePage.tsx

@@ -87,6 +87,7 @@ function OfferAndForcedTradePage(props: OfferAndForcedTradePageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem={common.activeNavItem}
       path={common.path}
       description={common.description}
     >
@@ -262,13 +263,15 @@ function getCommon(transactionHash?: Hash256, offerId?: string) {
     return {
       path: `/transactions/${transactionHash.toString()}`,
       description: `Details of the ${transactionHash.toString()} forced trade transaction`,
-    }
+      activeNavItem: 'Forced transactions',
+    } as const
   }
   if (offerId) {
     return {
       path: `/offers/${offerId}`,
       description: `Details of the ${offerId} forced trade offer`,
-    }
+      activeNavItem: 'Offers',
+    } as const
   }
   throw new Error('No transaction hash or offer id')
 }

packages/frontend/src/view/pages/transaction/PerpetualForcedWithdrawalPage.tsx

@@ -57,6 +57,7 @@ function PerpetualForcedWithdrawalPage(
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} forced withdrawal transaction`}
     >

packages/frontend/src/view/pages/transaction/RegularWithdrawalPage.tsx

@@ -44,6 +44,7 @@ function RegularWithdrawalPage(props: RegularWithdrawalPageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} withdrawal transaction`}
     >

packages/frontend/src/view/pages/transaction/SpotForcedWithdrawalPage.tsx

@@ -52,6 +52,7 @@ function SpotForcedWithdrawalPage(props: SpotForcedWithdrawalPageProps) {
   return (
     <Page
       context={props.context}
+      activeNavItem="Forced transactions"
       path={`/transactions/${props.transactionHash.toString()}`}
       description={`Details of the ${props.transactionHash.toString()} forced withdrawal transaction`}
     >