Feat/sidebar locale

dist/index.mjs

@@ -7173,7 +7173,8 @@ var SidebarElements = ({ slugPrefix, items, subItemLevel }) => {
     activeSidebarElement,
     sidebarElementStatus,
     toggleSidebarElementStatus,
-    sidebarDataMaster
+    sidebarDataMaster,
+    locale
   } = useContext4(LibraryContext);
   const router = useRouter3();
   const handleClick = (e, pathSuffix, slug) => {
@@ -7217,6 +7218,7 @@ var SidebarElements = ({ slugPrefix, items, subItemLevel }) => {
     endpoint,
     children
   }) => {
+    const localizedName = typeof name === "string" ? name : name[`${locale}`];
     const isExpandable = children.length > 0;
     const pathSuffix = method ? `#${method.toLowerCase()}-${endpoint}` : "";
     const activeItem = method ? `${slug}${pathSuffix}` : slug;
@@ -7260,7 +7262,7 @@ var SidebarElements = ({ slugPrefix, items, subItemLevel }) => {
                 method
               }
             ),
-            name
+            localizedName
           ]
         }
       ) : checkDocumentationType(sidebarDataMaster, slug, "link") ? /* @__PURE__ */ jsxs12(Link3, { href: slug, target: "_blank", sx: styles_default11.elementText, children: [
@@ -7283,7 +7285,7 @@ var SidebarElements = ({ slugPrefix, items, subItemLevel }) => {
                 method
               }
             ),
-            name
+            localizedName
           ]
         }
       )

src/components/sidebar-elements/index.tsx

@@ -39,6 +39,7 @@ const SidebarElements = ({ slugPrefix, items, subItemLevel }: SidebarProps) => {
     sidebarElementStatus,
     toggleSidebarElementStatus,
     sidebarDataMaster,
+    locale,
   } = useContext(LibraryContext)
   const router = useRouter()
 
@@ -107,6 +108,8 @@ const SidebarElements = ({ slugPrefix, items, subItemLevel }: SidebarProps) => {
     endpoint,
     children,
   }: SidebarElement) => {
+    const localizedName: string =
+      typeof name === 'string' ? name : name[`${locale}`]
     const isExpandable = children.length > 0
     const pathSuffix = method ? `#${method.toLowerCase()}-${endpoint}` : ''
     const activeItem = method ? `${slug}${pathSuffix}` : slug
@@ -162,7 +165,7 @@ const SidebarElements = ({ slugPrefix, items, subItemLevel }: SidebarProps) => {
                   method={method}
                 />
               )}
-              {name}
+              {localizedName}
             </Link>
           ) : checkDocumentationType(sidebarDataMaster, slug, 'link') ? (
             <Link href={slug} target="_blank" sx={styles.elementText}>
@@ -184,7 +187,7 @@ const SidebarElements = ({ slugPrefix, items, subItemLevel }: SidebarProps) => {
                   method={method}
                 />
               )}
-              {name}
+              {localizedName}
             </Box>
           )}
         </Flex>

src/lib/sidebar/Sidebar.stories.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import Sidebar from './index'
 import LibraryContextProvider from 'utils/context/libraryContext'
-import { exampleContextProps } from 'utils/storybook-constants'
+import {
+  exampleContextProps,
+  exampleContextPropsLocale,
+} from 'utils/storybook-constants'
 import { ThemeProvider } from '@vtex/brand-ui'
 
 const meta = {
@@ -27,3 +30,19 @@ export const SimpleSidebar: Story = {
     parentsArray: [],
   },
 }
+
+/** Story in which the navigation file contains the translations in english, spanish and portuguese for each page name. */
+export const SidebarWithLocale: Story = {
+  args: {
+    parentsArray: [],
+  },
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <LibraryContextProvider {...exampleContextPropsLocale}>
+          <Story />
+        </LibraryContextProvider>
+      </ThemeProvider>
+    ),
+  ],
+}

src/utils/storybook-constants.ts

@@ -21,6 +21,43 @@ export const sections = [
   ],
 ]
 
+export const navigationLocale = [
+  {
+    documentation: 'Guides',
+    slugPrefix: 'docs/guides',
+    categories: [
+      {
+        name: {
+          en: 'Getting Started',
+          es: 'Primeros pasos',
+          pt: 'Primeiros passos',
+        },
+        slug: 'getting-started',
+        origin: '',
+        type: 'markdown',
+        children: [
+          {
+            name: {
+              en: 'Platform  overview',
+              es: 'Vista General de la plataforma',
+              pt: 'Visão geral da plataforma',
+            },
+            slug: 'getting-started-platform-overview',
+            origin: '',
+            type: 'markdown',
+            children: [],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    documentation: 'Reference',
+    slugPrefix: 'docs/reference',
+    categories: [],
+  },
+]
+
 export const navigation = [
   {
     documentation: 'Guides',
@@ -33,7 +70,7 @@ export const navigation = [
         type: 'markdown',
         children: [
           {
-            name: 'Plataform overview',
+            name: 'Platform  overview',
             slug: 'getting-started-platform-overview',
             origin: '',
             type: 'markdown',
@@ -43,15 +80,30 @@ export const navigation = [
       },
     ],
   },
+  {
+    documentation: 'Reference',
+    slugPrefix: 'docs/reference',
+    categories: [],
+  },
 ]
 
+const locale: 'en' | 'pt' | 'es' = 'pt'
+
 export const exampleContextProps = {
   sections: sections,
   isPreview: false,
   sectionSelected: '',
   fallback: navigation,
 }
 
+export const exampleContextPropsLocale = {
+  sections: sections,
+  isPreview: false,
+  sectionSelected: '',
+  fallback: navigationLocale,
+  locale,
+}
+
 const markdown_example = `
 # Clients