@redocly/theme 0.25.1-beta.4 → 0.25.2

package/src/components/Feedback/Comment.tsx

@@ -10,12 +10,6 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.comment.submitText',
-    label: 'theme.feedback.settings.comment.label',
-    send: 'theme.feedback.settings.comment.send',
-    cancel: 'theme.feedback.settings.comment.cancel',
-  };
 
   const send = () => {
     if (!text) return;
@@ -29,9 +23,9 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   if (submitValue) {
     return (
       <Wrapper className={className}>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.comment.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.comment.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -41,17 +35,23 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
 
   return (
     <Wrapper data-component-name="Feedback/Comment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Please share your feedback with us.')}
+      <Label data-translation-key="theme.feedback.settings.comment.label">
+        {translate(
+          'theme.feedback.settings.comment.label',
+          label || 'Please share your feedback with us.',
+        )}
       </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
       <ButtonsContainer>
-        <SendButton data-translation-key={translationKeys.send} onClick={send}>
-          {translate(translationKeys.send, 'Send')}
+        <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
+          {translate('theme.feedback.settings.comment.send', 'Send')}
         </SendButton>
         {onCancel && (
-          <CancelButton data-translation-key={translationKeys.cancel} onClick={onCancel}>
-            {translate(translationKeys.cancel, 'Cancel')}
+          <CancelButton
+            data-translation-key="theme.feedback.settings.comment.cancel"
+            onClick={onCancel}
+          >
+            {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
           </CancelButton>
         )}
       </ButtonsContainer>

package/src/components/Feedback/Feedback.tsx

@@ -15,6 +15,8 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const feedbackConf = { ...themeFeedbackConf, ...props };
 
   const renderFeedbackComponent = () => {
+    const { type, settings, path } = feedbackConf;
+
     switch (type) {
       case 'rating':
         return (
@@ -70,8 +72,6 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
     }
   };
 
-  const { type, settings, path } = feedbackConf;
-
   return <React.Fragment key={pathname}>{renderFeedbackComponent()}</React.Fragment>;
 };
 

package/src/components/Feedback/Mood.tsx

@@ -15,16 +15,10 @@ export enum MOOD_STATES {
 export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState('');
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   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',
-    satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
-    neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
-    dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
-  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -42,21 +36,24 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
       switch (score) {
         case MOOD_STATES.SATISFIED:
           return translate(
-            translationKeys.satisfiedLabel,
+            'theme.feedback.settings.comment.satisfiedLabel',
             commentSettings.satisfiedLabel || 'What was most helpful?',
           );
         case MOOD_STATES.NEUTRAL:
           return translate(
-            translationKeys.neutralLabel,
+            'theme.feedback.settings.comment.neutralLabel',
             commentSettings.neutralLabel || 'What can we improve?',
           );
         case MOOD_STATES.DISSATISFIED:
           return translate(
-            translationKeys.dissatisfiedLabel,
+            'theme.feedback.settings.comment.dissatisfiedLabel',
             commentSettings.dissatisfiedLabel || 'What can we improve?',
           );
         default:
-          return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+          return translate(
+            'theme.feedback.settings.comment.satisfiedLabel',
+            'What can we improve?',
+          );
       }
     };
     return (
@@ -68,15 +65,23 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
-          {translate(translationKeys.submitText, submitText || 'Thank you for your feedback!')}
+        <Label data-translation-key="theme.feedback.settings.submitText">
+          {translate(
+            'theme.feedback.settings.submitText',
+            submitText || 'Thank you for your feedback!',
+          )}
         </Label>
       </Wrapper>
     );
@@ -84,8 +89,8 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <Wrapper data-component-name="Feedback/Mood" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Rating.tsx

@@ -18,14 +18,11 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
     comment: commentSettings,
     reasons: reasonsSettings,
   } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   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',
-  };
   const maxRating = max || 5;
 
   if (score && reasonsSettings?.enable && !reasons.length) {
@@ -49,17 +46,21 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-      max: maxRating,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+        max: maxRating,
+      });
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -69,8 +70,8 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
   return (
     <Wrapper data-component-name="Feedback/Rating" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'How helpful was this page?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
       </Label>
       <Stars max={maxRating} onSubmit={setScore} />
     </Wrapper>

package/src/components/Feedback/Reasons.tsx

@@ -9,11 +9,6 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   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 <></>;
@@ -36,12 +31,12 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   return (
     <Wrapper
       data-component-name="Feedback/Reasons"
-      data-translation-key={translationKeys.label}
+      data-translation-key="theme.feedback.settings.reasons.label"
       className={className}
     >
       <Label>
         {translate(
-          translationKeys.label,
+          'theme.feedback.settings.reasons.label',
           label || 'Which statement describes your thoughts about this page?',
         )}
       </Label>
@@ -55,16 +50,16 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
             onChange={() => handleOptionChange(idx)}
           />
           <label
-            data-translation-key={`${translationKeys.items}.${idx + 1}`}
+            data-translation-key={`theme.feedback.settings.reasons.items.${idx + 1}`}
             id={reason}
             onClick={() => handleOptionChange(idx)}
           >
-            {translate(`${translationKeys.items}.${idx + 1}`, reason)}
+            {translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>
         </OptionWrapper>
       ))}
-      <SendButton data-translation-key={translationKeys.send} onClick={submitForm}>
-        {translate(translationKeys.send, buttonText || 'Send')}
+      <SendButton data-translation-key="theme.feedback.settings.reasons.send" onClick={submitForm}>
+        {translate('theme.feedback.settings.reasons.send', buttonText || 'Send')}
       </SendButton>
     </Wrapper>
   );

package/src/components/Feedback/ReportDialog.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import { Comment } from '@theme/components/Feedback/Comment';
 import type { ReportDialogProps } from '@theme/components/Feedback';
 
@@ -12,13 +14,15 @@ export const ReportDialog = ({
   submitFeedback,
 }: ReportDialogProps): JSX.Element => {
   const { label } = settings;
+  const { pathname } = useLocation();
 
   return (
     <Wrapper className="modal">
       <Comment
         settings={{ label }}
-        onSubmit={(value) => {
-          submitFeedback({ type: 'problem', values: value, path: location });
+        onSubmit={async (value) => {
+          await submitFeedback({ type: 'problem', values: value, location, path: pathname });
+          telemetry.send('code_snippet_reported', {});
           onSubmit();
         }}
         onCancel={onCancel}

package/src/components/Feedback/Sentiment.tsx

@@ -8,16 +8,11 @@ import { useTranslate } from '@portal/hooks';
 
 export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   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;
@@ -34,11 +29,11 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
     const commentLabel =
       score === 1
         ? translate(
-            translationKeys.likeLabel,
+            'theme.feedback.settings.comment.likeLabel',
             commentSettings.likeLabel || 'What was most helpful?',
           )
         : translate(
-            translationKeys.dislikeLabel,
+            'theme.feedback.settings.comment.dislikeLabel',
             commentSettings.dislikeLabel || 'What can we improve?',
           );
     return (
@@ -47,16 +42,19 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+      setIsSubmitted(true);
+    }
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -66,8 +64,8 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
 
   return (
     <Wrapper data-component-name="Feedback/Sentiment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Thumbs.tsx

@@ -5,10 +5,6 @@ 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>
@@ -50,16 +46,13 @@ export const ThumbUp = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbUp, text || 'Yes')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbUp', text || 'Yes')}</span>
     </Wrapper>
   );
 };
 
 export const ThumbDown = ({ text }: { text?: string }) => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    thumbDown: 'theme.feedback.sentiment.thumbDown',
-  };
   return (
     <Wrapper style={{ alignItems: 'end' }}>
       <Icon>
@@ -100,7 +93,7 @@ export const ThumbDown = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbDown, text || 'No')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbDown', text || 'No')}</span>
     </Wrapper>
   );
 };

package/src/components/Feedback/types.ts

@@ -90,6 +90,6 @@ export type ReportDialogProps = {
   settings: {
     label?: string;
   };
-  submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+  submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
   className?: string;
 };

package/src/components/Feedback/useReportDialog.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import type { ReportDialogProps } from '@theme/components/Feedback/types';
 import { useTranslate } from '@portal/hooks';
 import { useThemeConfig } from '@theme/hooks';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 
 export interface ReportButtonProps {
   onClick: () => void;
@@ -20,11 +21,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
   const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.report.buttonText',
-    tooltipText: 'theme.codeSnippet.report.tooltipText',
-    label: 'theme.codeSnippet.report.label',
-  };
+  const { submitFeedback } = useSubmitFeedback();
 
   const showReportDialog = () => {
     setIsReportDialogShown(true);
@@ -34,16 +31,17 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    buttonText: translate(translationKeys.buttonText, 'Report'),
-    tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+    buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
     visible: isReportButtonShown,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: translate(translationKeys.label, 'What is wrong with this code?'),
+      label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,
+    submitFeedback,
   };
 
   return {

package/src/components/Filter/Filter.tsx

@@ -16,10 +16,6 @@ export function Filter({
   filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    selectAll: 'theme.catalog.filters.select.all',
-    clear: 'theme.catalog.filters.clear',
-  };
 
   if (!filter.parentUsed) return null;
 
@@ -34,7 +30,9 @@ export function Filter({
         value: '',
         element: (
           <FilterOption key="all" onClick={() => filter.selectOption('')}>
-            <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
+            <FilterOptionLabel>
+              {translate('theme.catalog.filters.select.all', 'All')}
+            </FilterOptionLabel>
             <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
           </FilterOption>
         ),
@@ -111,7 +109,7 @@ export function Filter({
         </>
       ) : (
         filter.filteredOptions.map((value: any) => {
-          const id = 'filter--' + filter.property + '--' + value.value;
+          const id = 'filter--' + filter.property + '--' + slug(value.value);
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
@@ -212,6 +210,11 @@ const StyledSelect = styled(Select)`
   }
 `;
 
+// TODO: import from portal
+function slug(str: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}
+
 const DatePickerWrapper = styled.div`
   color: var(--filter-date-picker-color);
   display: flex;

package/src/components/Filter/FilterContent.tsx

@@ -26,10 +26,6 @@ export function FilterContent({
   filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    clearAll: 'theme.catalog.filters.clearAll',
-  };
 
   const hasActiveFilters = filters.some((filter) => {
     if (filterTerm) return true;
@@ -49,7 +45,7 @@ export function FilterContent({
     <FilterContentWrapper isMobile={isMobile}>
       <FilterControls>
         <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
           value={filterTerm}
           onChange={(e) => setFilterTerm(e.target.value)}
         />
@@ -66,7 +62,7 @@ export function FilterContent({
       {hasActiveFilters && (
         <ActionsContainer>
           <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
-            {translate(translationKeys.placeholder, 'Clear all filters')}
+            {translate('theme.catalog.filters.clearAll', 'Clear all filters')}
           </ClearAllButton>
         </ActionsContainer>
       )}

package/src/components/Filter/FilterPopover.tsx

@@ -34,10 +34,6 @@ export function FilterPopover({
     })
     .filter(Boolean) as ResolvedFilter[];
 
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    done: 'theme.catalog.filters.done',
-  };
   const { translate } = useTranslate();
 
   return (
@@ -45,7 +41,7 @@ export function FilterPopover({
       <FilterPopoverHeader>
         <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
         <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
-          {translate(translationKeys.placeholder, 'Done')}
+          {translate('theme.catalog.filters.done', 'Done')}
         </FilterPopoverHeaderButton>
       </FilterPopoverHeader>
       <FilterContent
@@ -57,7 +53,7 @@ export function FilterPopover({
       />
       <FilterControls>
         <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
           value={filterTerm}
           onChange={(e) => setFilterTerm(e.target.value)}
         />

package/src/components/Footer/FooterCopyright.tsx

@@ -16,16 +16,13 @@ export function FooterCopyright({
   const { translate } = useTranslate();
   const { changeLanguage } = useI18n();
 
-  const translationKeys = {
-    copyrightText: 'theme.footer.copyrightText',
-  };
   return copyrightText ? (
     <Wrapper
       className={className}
       data-component-name="Footer/FooterCopyright"
-      data-translation-key={translationKeys.copyrightText}
+      data-translation-key="theme.footer.copyrightText"
     >
-      <Label>{translate(translationKeys.copyrightText, copyrightText)}</Label>
+      <Label>{translate('theme.footer.copyrightText', copyrightText)}</Label>
       <LanguagePicker onChangeLanguage={changeLanguage} placement="top" alignment="end" />
     </Wrapper>
   ) : null;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -40,7 +40,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   const text =
     format === 'timeago'
-      ? translate(translationKey, 'Last updated ')
+      ? translate(translationKey, 'Last updated') + ' '
       : translate(translationKey, 'Last updated on');
 
   return (

package/src/components/Menu/hooks/use-mobile-menu-items.ts

@@ -13,10 +13,6 @@ const MENU_SEPARATOR: ResolvedNavItem = {
   separatorLine: true,
 };
 
-const TRANSLATION_KEYS = {
-  products: 'theme.mobileMenu.products',
-};
-
 export const useMobileMenuItems = (menuType: MenuType) => {
   const { versions = [] } = usePageVersions() || {};
   const { defaultLocale, currentLocale, locales } = useI18nConfig();
@@ -71,7 +67,7 @@ export const useMobileMenuItems = (menuType: MenuType) => {
     if (productMenuItems.length) {
       menuItems.push({
         type: 'separator',
-        label: translate(TRANSLATION_KEYS.products, 'Products'),
+        label: translate('theme.mobileMenu.products', 'Products'),
       });
 
       menuItems.push(...productMenuItems);

package/src/components/Menu/hooks/use-mobile-menu-levels.ts

@@ -7,11 +7,6 @@ import { MenuType } from '@theme/components/Menu/constants';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItem } from '@theme/types/portal';
 
-const TRANSLATION_KEYS = {
-  mainMenu: 'theme.mobileMenu.mainMenu',
-  previous: 'theme.mobileMenu.previous',
-};
-
 export const useMobileMenuLevels = () => {
   const { versions = [] } = usePageVersions() || {};
   const activeVersion = versions.find((version) => version?.active);
@@ -29,7 +24,7 @@ export const useMobileMenuLevels = () => {
   const menuLevels = useMemo(() => {
     const menuLevels = [
       {
-        label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+        label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
         type: MenuType.MAIN_MENU,
       },
     ];
@@ -43,7 +38,7 @@ export const useMobileMenuLevels = () => {
 
     if (sidebarItems.length || activeVersion) {
       menuLevels.push({
-        label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+        label: translate('theme.mobileMenu.previous', 'Previous'),
         type: MenuType.PAGE,
       });
     }

package/src/components/Menu/utils.ts

@@ -1,7 +1,8 @@
 import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
 
 import type { ItemState } from '@theme/components/Sidebar/types';
-import type { Locale, ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { Locale, ResolvedNavItem, Version } from '@theme/types/portal';
 import { getPathnameForLocale } from '@portal/utils';
 import { withPathPrefix } from '@theme/utils/urls';