@redocly/theme 0.11.5 → 0.12.0

package/src/components/Feedback/Reasons.tsx

@@ -3,10 +3,17 @@ import styled from 'styled-components';
 
 import { Button } from '@theme/components/Button/Button';
 import type { ReasonsProps } from '@theme/components/Feedback';
+import { useTranslate } from '@portal/hooks';
 
 export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
   const { label, multi, buttonText, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+  const { translate } = useTranslate();
+  const translationKeys = {
+    label: 'theme.feedback.settings.reasons.label',
+    items: 'theme.feedback.settings.reasons.items',
+    send: 'theme.feedback.settings.reasons.send',
+  };
 
   if (!items.length) {
     return <></>;
@@ -27,8 +34,13 @@ export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
   };
 
   return (
-    <Wrapper data-component-name="Feedback/Reasons">
-      <Label>{label || 'Which statement describes your thoughts about this page?'}</Label>
+    <Wrapper data-component-name="Feedback/Reasons" data-translation-key={translationKeys.label}>
+      <Label>
+        {translate(
+          translationKeys.label,
+          label || 'Which statement describes your thoughts about this page?',
+        )}
+      </Label>
       {items.map((reason, idx) => (
         <OptionWrapper key={reason}>
           <input
@@ -38,12 +50,18 @@ export const Reasons = ({ settings, onSubmit }: ReasonsProps): JSX.Element => {
             name="reasons"
             onChange={() => handleOptionChange(idx)}
           />
-          <label id={reason} onClick={() => handleOptionChange(idx)}>
-            {reason}
+          <label
+            data-translation-key={`${translationKeys.items}.${idx + 1}`}
+            id={reason}
+            onClick={() => handleOptionChange(idx)}
+          >
+            {translate(`${translationKeys.items}.${idx + 1}`, reason)}
           </label>
         </OptionWrapper>
       ))}
-      <SendButton onClick={submitForm}>{buttonText || 'Send'}</SendButton>
+      <SendButton data-translation-key={translationKeys.send} onClick={submitForm}>
+        {translate(translationKeys.send, buttonText || 'Send')}
+      </SendButton>
     </Wrapper>
   );
 };

package/src/components/Feedback/Sentiment.tsx

@@ -4,12 +4,20 @@ import styled from 'styled-components';
 import type { SentimentProps, ReasonsProps } from '@theme/components/Feedback';
 import { Comment, Reasons } from '@theme/components/Feedback';
 import { ThumbUp, ThumbDown } from '@theme/components/Feedback/Thumbs';
+import { useTranslate } from '@portal/hooks';
 
 export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+  const translationKeys = {
+    submitText: 'theme.feedback.settings.submitText',
+    label: 'theme.feedback.settings.label',
+    likeLabel: 'theme.feedback.settings.comment.likeLabel',
+    dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
+  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -25,8 +33,14 @@ export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element =
   if (score && commentSettings?.enable && !comment) {
     const commentLabel =
       score === 1
-        ? commentSettings.likeLabel || 'What was most helpful?'
-        : commentSettings.dislikeLabel || 'What can we improve?';
+        ? translate(
+            translationKeys.likeLabel,
+            commentSettings.likeLabel || 'What was most helpful?',
+          )
+        : translate(
+            translationKeys.dislikeLabel,
+            commentSettings.dislikeLabel || 'What can we improve?',
+          );
     return (
       <Comment onSubmit={({ comment }) => setComment(comment)} settings={{ label: commentLabel }} />
     );
@@ -40,14 +54,21 @@ export const Sentiment = ({ settings, onSubmit }: SentimentProps): JSX.Element =
     });
     return (
       <Wrapper>
-        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+        <Label data-translation-key={translationKeys.submitText}>
+          {translate(
+            translationKeys.submitText,
+            submitText || 'Thank you for helping improve our documentation!',
+          )}
+        </Label>
       </Wrapper>
     );
   }
 
   return (
     <Wrapper data-component-name="Feedback/Sentiment">
-      <Label>{label || 'Was this page helpful?'}</Label>
+      <Label data-translation-key={translationKeys.label}>
+        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      </Label>
       <Vote onClick={() => setScore(1)}>
         <ThumbUp text="Yes" />
       </Vote>

package/src/components/Feedback/Thumbs.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-export const ThumbUp = ({ text }: { text?: string }) => (
-  <Wrapper style={{ alignItems: 'normal' }}>
-    <Icon>
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
-        <g>
+import { useTranslate } from '@portal/hooks';
+
+export const ThumbUp = ({ text }: { text?: string }) => {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    thumbUp: 'theme.feedback.sentiment.thumbUp',
+  };
+
+  return (
+    <Wrapper style={{ alignItems: 'normal' }}>
+      <Icon>
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
           <g>
             <g>
-              <path
-                d="M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918
+              <g>
+                <path
+                  d="M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918
               c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533
               c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855
               c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6
@@ -20,45 +28,51 @@ export const ThumbUp = ({ text }: { text?: string }) => (
               c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229
               c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267
               C512,310.699,505.634,298.59,495.736,290.773z"
-              />
-              <path
-                d="M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067
+                />
+                <path
+                  d="M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067
               S67.388,443.733,76.8,443.733z"
-              />
-              <path
-                d="M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1
+                />
+                <path
+                  d="M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1
               c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533
               s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6
               c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533
               S174.481,247.467,179.2,247.467z"
-              />
-              <path
-                d="M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533
+                />
+                <path
+                  d="M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533
               c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467
               V469.333z"
-              />
+                />
+              </g>
             </g>
           </g>
-        </g>
-      </svg>
-    </Icon>
-    <span>{text || 'Yes'}</span>
-  </Wrapper>
-);
+        </svg>
+      </Icon>
+      <span>{translate(translationKeys.thumbUp, text || 'Yes')}</span>
+    </Wrapper>
+  );
+};
 
-export const ThumbDown = ({ text }: { text?: string }) => (
-  <Wrapper style={{ alignItems: 'end' }}>
-    <Icon>
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
-        <g>
+export const ThumbDown = ({ text }: { text?: string }) => {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    thumbDown: 'theme.feedback.sentiment.thumbDown',
+  };
+  return (
+    <Wrapper style={{ alignItems: 'end' }}>
+      <Icon>
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512">
           <g>
             <g>
-              <path
-                d="M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067
+              <g>
+                <path
+                  d="M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067
 				c-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z"
-              />
-              <path
-                d="M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996
+                />
+                <path
+                  d="M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996
 				c6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229
 				c0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845
 				c-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79
@@ -69,26 +83,27 @@ export const ThumbDown = ({ text }: { text?: string }) => (
 				c26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667
 				c0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467
 				c24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z"
-              />
-              <path
-                d="M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667
+                />
+                <path
+                  d="M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667
 				c-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167
 				c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166
 				c31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4
 				C358.4,319.556,354.586,315.733,349.867,315.733z"
-              />
-              <path
-                d="M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533
+                />
+                <path
+                  d="M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533
 				c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z"
-              />
+                />
+              </g>
             </g>
           </g>
-        </g>
-      </svg>
-    </Icon>
-    <span>{text || 'No'}</span>
-  </Wrapper>
-);
+        </svg>
+      </Icon>
+      <span>{translate(translationKeys.thumbDown, text || 'No')}</span>
+    </Wrapper>
+  );
+};
 
 const Wrapper = styled.div`
   font-family: var(--font-family-base);

package/src/components/Feedback/useReportDialog.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import type { ReportDialogProps } from '@theme/components/Feedback/types';
+import { useTranslate } from '@portal/hooks';
 
 type ReportSettings = {
   hide?: boolean;
@@ -11,6 +12,11 @@ type ReportSettings = {
 export function useReportDialog(reportSettings: ReportSettings): Record<string, any> {
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
   const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+  const { translate } = useTranslate();
+  const translationKeys = {
+    tooltipText: 'theme.codeSnippet.report.tooltipText',
+    label: 'theme.codeSnippet.report.label',
+  };
 
   const showReportDialog = () => {
     setIsReportDialogShown(true);
@@ -20,11 +26,14 @@ export function useReportDialog(reportSettings: ReportSettings): Record<string,
   };
   const reportButtonProps = {
     onClick: showReportDialog,
-    title: reportSettings.tooltipText || 'Report a problem',
+    title: translate(translationKeys.tooltipText, reportSettings.tooltipText || 'Report a problem'),
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: reportSettings.label || 'What is wrong with a code?',
+      label: translate(
+        translationKeys.label,
+        reportSettings.label || 'What is wrong with this code?',
+      ),
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,

package/src/components/Filter/Filter.tsx

@@ -3,25 +3,33 @@ import styled from 'styled-components';
 
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { Checkbox } from '@theme/ui/Checkbox';
+import { useTranslate } from '@portal/hooks';
 
 export function Filter({ filter }: { filter: ResolvedFilter }) {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    selectAll: 'theme.catalog.filters.select.all',
+  };
+
   if (!filter.parentUsed) return null;
   return (
     <FilterGroup key={filter.property + filter.title}>
-      <FilterTitle>{filter.title}</FilterTitle>
+      <FilterTitle>{translate(filter.titleTranslationKey, filter.title)}</FilterTitle>
       {filter.type === 'select' ? (
         <StyledSelect
           onChange={(e) => filter.selectOption(e.target.value)}
           value={filter.selectedOptions.values().next()?.value || ''}
         >
-          <option key="none" value="">
-            All
+          <option key="none" value="" data-translation-key={translationKeys.selectAll}>
+            {translate(translationKeys.selectAll, 'All')}
           </option>
-          {filter.filteredOptions.map((value: any) => (
-            <option key={value.value} value={value.value}>
-              {value.value} ({value.count})
-            </option>
-          ))}
+          {filter.filteredOptions.map((value: any) => {
+            return (
+              <option key={value.value} value={value.value}>
+                {translate(value.value)} ({value.count})
+              </option>
+            );
+          })}
         </StyledSelect>
       ) : (
         filter.filteredOptions.map((value: any) => {
@@ -35,7 +43,7 @@ export function Filter({ filter }: { filter: ResolvedFilter }) {
                 onChange={() => filter.toggleOption(value.value)}
               />
               <label htmlFor={id}>
-                {value.value} ({value.count})
+                {translate(value.value)} ({value.count})
               </label>
             </FilterValue>
           );

package/src/components/Footer/CustomFooter.tsx

@@ -25,7 +25,7 @@ export function CustomFooter({ data }: FooterProps): JSX.Element | null {
           />
         );
       })}
-      <FooterCopyright copyrightText={data.copyrightText} />
+      <FooterCopyright copyrightText={data.copyrightText as string} />
     </FooterContainer>
   );
 }

package/src/components/Footer/FooterColumn.tsx

@@ -3,15 +3,17 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
 }
 
 export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
+  const { translate } = useTranslate();
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn">
-      <FooterColumnTitle>{column.label}</FooterColumnTitle>
+      <FooterColumnTitle>{translate(column.labelTranslationKey, column.label)}</FooterColumnTitle>
       {column?.items?.map((columnItem, columnItemIndex) => {
         if (columnItem.type === 'error') {
           return null;
@@ -19,7 +21,7 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
 
         return columnItem.type === 'separator' ? (
           <FooterSeparator key={columnItem.label + '_' + columnItemIndex}>
-            {columnItem.label}
+            {translate(columnItem.labelTranslationKey, columnItem.label)}
           </FooterSeparator>
         ) : (
           <FooterLink
@@ -29,7 +31,7 @@ export function FooterColumn({ column }: FooterColumnProps): JSX.Element {
             target={columnItem.target}
             data-cy={columnItem.label}
           >
-            {columnItem.label}
+            {translate(columnItem.labelTranslationKey, columnItem.label)}
           </FooterLink>
         );
       })}

package/src/components/Footer/FooterCopyright.tsx

@@ -1,15 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { NavGroup } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface FooterCopyrightProps {
-  copyrightText: NavGroup;
+  copyrightText: string;
 }
 
 export function FooterCopyright({ copyrightText = '' }: FooterCopyrightProps): JSX.Element | null {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    copyrightText: 'theme.footer.copyrightText',
+  };
   return copyrightText ? (
-    <Wrapper data-component-name="Footer/FooterCopyright">{copyrightText}</Wrapper>
+    <Wrapper
+      data-component-name="Footer/FooterCopyright"
+      data-translation-key={translationKeys.copyrightText}
+    >
+      {translate(translationKeys.copyrightText, copyrightText)}
+    </Wrapper>
   ) : null;
 }
 

package/src/components/LastUpdated/LastUpdated.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { format } from 'timeago.js';
 
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
 
 const FORMATS = {
   timeago: (date: Date, locale: string) => format(date, locale),
@@ -21,6 +22,7 @@ export interface LastUpdatedProps {
 
 export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const { markdown: { lastUpdatedBlock = {} } = {} } = useThemeConfig();
+  const { translate } = useTranslate();
 
   if (lastUpdatedBlock?.hide) {
     return null;
@@ -32,16 +34,22 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const isoDate = lastModified.toISOString().split('T')[0];
 
   const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](lastModified, locale);
+  const translationKey =
+    format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
 
-  const separator = format === 'timeago' ? ' ' : ' on ';
+  const text =
+    format === 'timeago'
+      ? translate(translationKey, 'Last updated ')
+      : translate(translationKey, 'Last updated on');
 
   return (
     <Wrapper
       data-component-name="LastUpdated/LastUpdated"
       rawOnPrint={format === 'timeago'}
       data-print-datetime={isoDate}
+      data-translation-key={translationKey}
     >
-      Last updated{separator}
+      {text}
       {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </Wrapper>

package/src/components/Markdown/MarkdownLayout.tsx

@@ -8,6 +8,7 @@ import { EditPageButton } from '@theme/components/EditPageButton';
 import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -34,6 +35,10 @@ export function MarkdownLayout({
   prevPage,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    text: 'theme.markdown.editPage.text',
+  };
   const { editPage: themeEditPage } = markdown || {};
 
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
@@ -44,7 +49,12 @@ export function MarkdownLayout({
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
           {mergedConf && (
-            <EditPageButton text={mergedConf.text} to={mergedConf.to} icon={mergedConf.icon} />
+            <EditPageButton
+              text={translate(translationKeys.text, mergedConf.text)}
+              to={mergedConf.to}
+              icon={mergedConf.icon}
+              data-translation-key={translationKeys.text}
+            />
           )}
         </LayoutTop>
         {markdownWrapper}

package/src/components/Menu/MenuGroup.tsx

@@ -6,6 +6,7 @@ import { MenuLinkItem } from '@theme/components/Menu/MenuLinkItem';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { ItemState } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
 
 interface MenuGroupProps {
   item: ItemState;
@@ -21,6 +22,8 @@ export function MenuGroup({
 }: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
   const [showChildren, setShowChildren] = useState<boolean>(isExpanded);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { translate } = useTranslate();
+
   useEffect(() => {
     timer.current && clearTimeout(timer.current);
     if (isExpanded) {
@@ -47,7 +50,7 @@ export function MenuGroup({
             visibility={item.items.length ? 'visible' : 'hidden'}
             direction={isExpanded ? 'down' : 'right'}
           />
-          {item.label}
+          {translate(item.labelTranslationKey, item.label)}
         </MenuGroupLabel>
       </MenuLinkItem>
 

package/src/components/Menu/MenuItem.tsx

@@ -6,13 +6,15 @@ import { ExternalIcon } from '@theme/icons/ExternalIcon';
 import { MenuItemLabel } from '@theme/components/Menu/MenuItemLabel';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
 
 export function MenuItem({ item }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
   return (
     <Wrapper data-component-name="Sidebar/MenuItem">
       <MenuLinkItem item={item}>
         <MenuItemLabel active={item.active}>
-          {item.label}
+          {translate(item.labelTranslationKey, item.label)}
           {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
         </MenuItemLabel>
       </MenuLinkItem>

package/src/components/Navbar/MobileNavbarItem.tsx

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import { Link } from '@portal/Link';
+import { useI18nConfig } from '@portal/hooks';
+import { getPathnameForLocale } from '@portal/utils';
 import type {
   ResolvedNavItem,
   ResolvedNavLinkItem,
@@ -21,10 +23,14 @@ export function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.E
   const { pathname } = useLocation();
   const [expandedDropdown, setExpandedDropdown] = useState(false);
   const toggleDropdown = () => setExpandedDropdown(!expandedDropdown);
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
 
   if ((navItem as ResolvedNavLinkItem).link) {
     const item = navItem as ResolvedNavLinkItem;
-    const isActive = pathname === withPathPrefix(item.link);
+    const isActive =
+      pathname ===
+      withPathPrefix(getPathnameForLocale(item.link, defaultLocale, currentLocale, locales));
+
     return (
       <NavMenuItem
         active={isActive}

package/src/components/Navbar/Navbar.tsx

@@ -13,6 +13,9 @@ import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
 import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
+import { useI18n } from '@portal/hooks';
+
+import { LanguagePicker } from '../../I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   #redocly_root {
@@ -23,6 +26,7 @@ const EmptyNavbarHack = createGlobalStyle`
 export function Navbar(): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
   const themeConfig = useThemeConfig();
+  const { changeLanguage } = useI18n();
 
   const menu = themeConfig.navbar?.items;
   const logo = themeConfig.logo;
@@ -56,6 +60,7 @@ export function Navbar(): JSX.Element | null {
         menu: menu as ResolvedConfigLinks,
         logo: logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>,
         hideUserProfile,
+        changeLanguage,
       }}
     />
   );
@@ -69,6 +74,7 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
   hideSearch: boolean;
   menu: ResolvedConfigLinks;
   hideUserProfile: boolean | string | undefined;
+  changeLanguage: (value: string) => void;
 }
 
 export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
@@ -81,6 +87,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
     logo,
     menu,
     hideUserProfile,
+    changeLanguage,
   } = props;
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
@@ -97,6 +104,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
         <NavbarLogo logo={logo} />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
+        <LanguagePicker onChangeLanguage={changeLanguage} />
         {hideUserProfile ? null : <AuthUserProfile />}
         <ColorModeSwitcher />
       </NavbarRow>

package/src/components/Navbar/NavbarDropdown.tsx

@@ -3,17 +3,19 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];
 }
 
 export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+  const { translate } = useTranslate();
   return (
     <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
       {items.map((item, index) => (
         <div key={`${item.label}_${index}`}>
-          <Link to={item.link}>{item.label}</Link>
+          <Link to={item.link}>{translate(item.labelTranslationKey, item.label)}</Link>
         </div>
       ))}
     </DropdownWrapper>