localize desktop nav bar links

Opentrons · Sep 23, 2024 · d794477 · d794477
1 parent 6a36d6d
commit d794477
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/app/src/App/DesktopApp.tsx b/app/src/App/DesktopApp.tsx
@@ -51,7 +51,7 @@ export const DesktopApp = (): JSX.Element => {
   const desktopRoutes: RouteProps[] = [
     {
       Component: ProtocolsLanding,
-      name: 'Protocols',
+      name: 'protocols',
       navLinkTo: '/protocols',
       path: '/protocols',
     },
@@ -67,13 +67,13 @@ export const DesktopApp = (): JSX.Element => {
     },
     {
       Component: Labware,
-      name: 'Labware',
+      name: 'labware',
       navLinkTo: '/labware',
       path: '/labware',
     },
     {
       Component: DevicesLanding,
-      name: 'Devices',
+      name: 'devices',
       navLinkTo: '/devices',
       path: '/devices',
     },

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { useTranslation } from 'react-i18next'
 import { NavLink, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import debounce from 'lodash/debounce'
@@ -110,6 +111,8 @@ const LogoImg = styled('img')`
 `
 
 export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
+  const { t } = useTranslation('top_navigation')
+
   const navigate = useNavigate()
   const navRoutes = routes.filter(
     ({ navLinkTo }: RouteProps) => navLinkTo != null
@@ -148,7 +151,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
               as="h3"
               margin={`${SPACING.spacing8} 0 ${SPACING.spacing8} ${SPACING.spacing12}`}
             >
-              {name}
+              {t(name)}
             </LegacyStyledText>
           </NavbarLink>
         ))}