@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/components/date-range-picker.tsx

@@ -1,21 +1,14 @@
 'use client';
 
+import { useDayPickerLocale } from '@/vdb/components/data-input/index.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { Calendar } from '@/vdb/components/ui/calendar.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { DefinedDateRange } from '@/vdb/framework/dashboard-widget/widget-filters-context.js';
+import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { cn } from '@/vdb/lib/utils.js';
-import {
-    addDays,
-    endOfDay,
-    endOfMonth,
-    endOfWeek,
-    format,
-    startOfDay,
-    startOfMonth,
-    startOfWeek,
-    subDays
-} from 'date-fns';
+import { Trans, useLingui } from '@lingui/react/macro';
+import { endOfDay, endOfMonth, endOfWeek, startOfDay, startOfMonth, startOfWeek, subDays } from 'date-fns';
 import { CalendarIcon } from 'lucide-react';
 import * as React from 'react';
 import { DateRange } from 'react-day-picker';
@@ -28,56 +21,64 @@ interface DateRangePickerProps {
 
 const presets = [
     {
-        label: 'Today',
+        id: 'today',
+        label: <Trans context="date-range">Today</Trans>,
         getValue: () => ({
             from: startOfDay(new Date()),
             to: endOfDay(new Date()),
         }),
     },
     {
-        label: 'Yesterday',
+        id: 'yesterday',
+        label: <Trans context="date-range">Yesterday</Trans>,
         getValue: () => ({
             from: startOfDay(subDays(new Date(), 1)),
             to: endOfDay(subDays(new Date(), 1)),
         }),
     },
     {
-        label: 'Last 7 days',
+        id: 'last-7-days',
+        label: <Trans context="date-range">Last 7 days</Trans>,
         getValue: () => ({
             from: startOfDay(subDays(new Date(), 6)),
             to: endOfDay(new Date()),
         }),
     },
     {
-        label: 'This week',
+        id: 'this-week',
+        label: <Trans context="date-range">This week</Trans>,
         getValue: () => ({
             from: startOfWeek(new Date(), { weekStartsOn: 1 }),
             to: endOfWeek(new Date(), { weekStartsOn: 1 }),
         }),
     },
     {
-        label: 'Last 30 days',
+        id: 'last-30-days',
+        label: <Trans context="date-range">Last 30 days</Trans>,
         getValue: () => ({
             from: startOfDay(subDays(new Date(), 29)),
             to: endOfDay(new Date()),
         }),
     },
     {
-        label: 'Month to date',
+        id: 'month-to-date',
+        label: <Trans context="date-range">Month to date</Trans>,
         getValue: () => ({
             from: startOfMonth(new Date()),
             to: endOfDay(new Date()),
         }),
     },
     {
-        label: 'This month',
+        id: 'this-month',
+        label: <Trans context="date-range">This month</Trans>,
         getValue: () => ({
             from: startOfMonth(new Date()),
             to: endOfMonth(new Date()),
         }),
     },
     {
-        label: 'Last month',
+        id: 'last-month',
+        label: <Trans context="date-range">Last month</Trans>,
         getValue: () => ({
             from: startOfMonth(subDays(new Date(), 30)),
             to: endOfMonth(subDays(new Date(), 30)),
@@ -87,16 +88,19 @@ const presets = [
 
 export function DateRangePicker({ className, dateRange, onDateRangeChange }: DateRangePickerProps) {
     const [open, setOpen] = React.useState(false);
+    const { t } = useLingui();
+    const { formatDate } = useLocalFormat();
+    const locale = useDayPickerLocale();
     // Internal state uses react-day-picker's DateRange type for Calendar compatibility
     const [selectedRange, setSelectedRange] = React.useState<DateRange>({
         from: dateRange.from,
-        to: dateRange.to
+        to: dateRange.to,
     });
 
     React.useEffect(() => {
         setSelectedRange({
             from: dateRange.from,
-            to: dateRange.to
+            to: dateRange.to,
         });
     }, [dateRange]);
 
@@ -106,14 +110,14 @@ export function DateRangePicker({ className, dateRange, onDateRangeChange }: Dat
             const to = range.to || range.from;
             const finalRange: DefinedDateRange = {
                 from: range.from,
-                to: to
+                to: to,
             };
             setSelectedRange({ from: range.from, to });
             onDateRangeChange(finalRange);
         }
     };
 
-    const handlePresetClick = (preset: typeof presets[number]) => {
+    const handlePresetClick = (preset: (typeof presets)[number]) => {
         const range = preset.getValue();
         handleSelect(range);
         setOpen(false);
@@ -121,15 +125,15 @@ export function DateRangePicker({ className, dateRange, onDateRangeChange }: Dat
 
     const formatDateRange = () => {
         if (!selectedRange.from) {
-            return 'Select date range';
+            return t`Select date range`;
         }
         if (!selectedRange.to || selectedRange.from === selectedRange.to) {
-            return format(selectedRange.from, 'MMM dd, yyyy');
+            return formatDate(selectedRange.from, { dateStyle: 'medium' });
         }
-        return `${format(selectedRange.from, 'MMM dd, yyyy')} - ${format(selectedRange.to, 'MMM dd, yyyy')}`;
+        return `${formatDate(selectedRange.from, { dateStyle: 'medium' })} - ${formatDate(selectedRange.to, { dateStyle: 'medium' })}`;
     };
 
-    const isPresetActive = (preset: typeof presets[number]) => {
+    const isPresetActive = (preset: (typeof presets)[number]) => {
         if (!selectedRange.from || !selectedRange.to) return false;
         const presetRange = preset.getValue();
         return (
@@ -143,10 +147,7 @@ export function DateRangePicker({ className, dateRange, onDateRangeChange }: Dat
             <PopoverTrigger asChild>
                 <Button
                     variant="outline"
-                    className={cn(
-                        'w-[280px] justify-start text-left font-normal',
-                        className
-                    )}
+                    className={cn('w-[280px] justify-start text-left font-normal', className)}
                 >
                     <CalendarIcon className="mr-2 h-4 w-4" />
                     {formatDateRange()}
@@ -155,9 +156,9 @@ export function DateRangePicker({ className, dateRange, onDateRangeChange }: Dat
             <PopoverContent className="w-auto p-0" align="start">
                 <div className="flex">
                     <div className="border-r p-2 space-y-0.5 min-w-0 w-32">
-                        {presets.map((preset) => (
+                        {presets.map(preset => (
                             <Button
-                                key={preset.label}
+                                key={preset.id}
                                 variant={isPresetActive(preset) ? 'default' : 'ghost'}
                                 size="sm"
                                 className="w-full justify-start font-normal text-xs h-7 px-2"
@@ -175,10 +176,11 @@ export function DateRangePicker({ className, dateRange, onDateRangeChange }: Dat
                             onSelect={handleSelect}
                             numberOfMonths={2}
                             showOutsideDays={false}
+                            locale={locale}
                         />
                     </div>
                 </div>
             </PopoverContent>
         </Popover>
     );
-}
+}

package/src/lib/components/layout/app-sidebar.tsx

@@ -9,16 +9,18 @@ import {
 } from '@/vdb/components/ui/sidebar.js';
 import { useDashboardExtensions } from '@/vdb/framework/extension-api/use-dashboard-extensions.js';
 import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import * as React from 'react';
 import { ChannelSwitcher } from './channel-switcher.js';
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     const { extensionsLoaded } = useDashboardExtensions();
+    const { isRTL } = useDisplayLocale();
     const { sections } = getNavMenuConfig();
 
     return (
         extensionsLoaded && (
-            <Sidebar collapsible="icon" {...props}>
+            <Sidebar collapsible="icon" {...props} side={isRTL ? 'right' : 'left'}>
                 <SidebarHeader>
                     <ChannelSwitcher />
                 </SidebarHeader>

package/src/lib/components/layout/channel-switcher.tsx

@@ -18,8 +18,8 @@ import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { useServerConfig } from '@/vdb/hooks/use-server-config.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { Link } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 import { ManageLanguagesDialog } from './manage-languages-dialog.js';
@@ -99,13 +99,9 @@ export function ChannelSwitcher() {
                                         <ChannelCodeLabel code={displayChannel?.code} />
                                     </span>
                                     <span className="truncate text-xs">
-                                        {hasMultipleLanguages ? (
-                                            <span className="cursor-pointer hover:text-foreground">
-                                                Language: {formatLanguageName(contentLanguage)}
-                                            </span>
-                                        ) : (
-                                            <span>Language: {formatLanguageName(contentLanguage)}</span>
-                                        )}
+                                        <span>
+                                            <Trans>Language: {formatLanguageName(contentLanguage)}</Trans>
+                                        </span>
                                     </span>
                                 </div>
                                 <ChevronsUpDown className="ml-auto" />
@@ -139,7 +135,7 @@ export function ChannelSwitcher() {
                                         <ChannelCodeLabel code={channel.code} />
                                         {channel.id === displayChannel?.id && (
                                             <span className="ml-auto text-xs text-muted-foreground">
-                                                Current
+                                                <Trans context="current channel">Current</Trans>
                                             </span>
                                         )}
                                     </DropdownMenuItem>
@@ -168,7 +164,9 @@ export function ChannelSwitcher() {
                                                         <span>{formatLanguageName(languageCode)}</span>
                                                         {contentLanguage === languageCode && (
                                                             <span className="ml-auto text-xs text-muted-foreground">
-                                                                Active
+                                                                <Trans context="active language">
+                                                                    Active
+                                                                </Trans>
                                                             </span>
                                                         )}
                                                     </DropdownMenuItem>

package/src/lib/components/layout/dev-mode-indicator.tsx

@@ -1,7 +1,7 @@
 import { Badge } from '@/vdb/components/ui/badge.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { CodeXmlIcon, XIcon } from 'lucide-react';
 
 export function DevModeIndicator() {

package/src/lib/components/layout/generated-breadcrumbs.tsx

@@ -5,11 +5,13 @@ import {
     BreadcrumbList,
     BreadcrumbSeparator,
 } from '@/vdb/components/ui/breadcrumb.js';
+import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
+import { useLingui } from '@lingui/react';
 import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import * as React from 'react';
 import { Fragment } from 'react';
-import { getNavMenuConfig } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
-import type { NavMenuItem, NavMenuSection } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 
 export interface BreadcrumbPair {
     label: string | React.ReactElement;
@@ -24,7 +26,9 @@ export function GeneratedBreadcrumbs() {
     const matches = useRouterState({ select: s => s.matches });
     const currentPath = useRouterState({ select: s => s.location.pathname });
     const router = useRouter();
+    const { i18n } = useLingui();
     const navMenuConfig = getNavMenuConfig();
+    const { bcp47Tag } = useDisplayLocale();
     const basePath = router.basepath || '';
 
     const normalizeBreadcrumb = (breadcrumb: any, pathname: string): BreadcrumbPair[] => {
@@ -51,9 +55,7 @@ export function GeneratedBreadcrumbs() {
     const rawCrumbs: BreadcrumbPair[] = React.useMemo(() => {
         return matches
             .filter(match => match.loaderData?.breadcrumb)
-            .flatMap(({ pathname, loaderData }) => 
-                normalizeBreadcrumb(loaderData.breadcrumb, pathname)
-            );
+            .flatMap(({ pathname, loaderData }) => normalizeBreadcrumb(loaderData.breadcrumb, pathname));
     }, [matches]);
 
     const isBaseRoute = (p: string) => p === basePath || p === `${basePath}/`;
@@ -119,8 +121,8 @@ export function GeneratedBreadcrumbs() {
     );
     const breadcrumbs: BreadcrumbPair[] = React.useMemo(() => {
         const arr = sectionCrumb ? [sectionCrumb, ...pageCrumbs] : pageCrumbs;
-        return arr.filter((c, i, self) =>
-            self.findIndex(x => x.path === c.path && x.label === c.label) === i,
+        return arr.filter(
+            (c, i, self) => self.findIndex(x => x.path === c.path && x.label === c.label) === i,
         );
     }, [sectionCrumb, pageCrumbs]);
     return (
@@ -130,7 +132,7 @@ export function GeneratedBreadcrumbs() {
                     <Fragment key={`${path}-${index}`}>
                         <BreadcrumbItem className="hidden md:block">
                             <BreadcrumbLink asChild>
-                                <Link to={path}>{label}</Link>
+                                <Link to={path}>{typeof label === 'string' ? i18n.t(label) : label}</Link>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
                         {index < arr.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}

package/src/lib/components/layout/language-dialog.tsx

@@ -1,7 +1,9 @@
 import { CurrencyCode } from '@/vdb/constants.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
+import { useUiLanguageLoader } from '@/vdb/hooks/use-ui-language-loader.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useState } from 'react';
 import { uiConfig } from 'virtual:vendure-ui-config';
 import { Button } from '../ui/button.js';
@@ -11,12 +13,22 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '.
 
 export function LanguageDialog() {
     const { i18n } = uiConfig;
+    const { loadAndActivateLocale } = useUiLanguageLoader();
     const { availableLocales, availableLanguages } = i18n;
     const { settings, setDisplayLanguage, setDisplayLocale } = useUserSettings();
+    const { humanReadableLanguageAndLocale } = useDisplayLocale();
     const availableCurrencyCodes = Object.values(CurrencyCode);
-    const { formatCurrency, formatLanguageName, formatCurrencyName, formatDate } = useLocalFormat();
+    const { formatCurrency, formatLanguageName, formatRegionName, formatCurrencyName, formatDate } =
+        useLocalFormat();
     const [selectedCurrency, setSelectedCurrency] = useState<string>('USD');
 
+    const orderedAvailableLanguages = availableLanguages.slice().sort((a, b) => a.localeCompare(b));
+    const orderedAvailableLocales = availableLocales.slice().sort((a, b) => a.localeCompare(b));
+    const handleLanguageChange = async (value: string) => {
+        setDisplayLanguage(value);
+        void loadAndActivateLocale(value);
+    };
+
     return (
         <DialogContent>
             <DialogHeader>
@@ -29,14 +41,15 @@ export function LanguageDialog() {
                     <Label>
                         <Trans>Display language</Trans>
                     </Label>
-                    <Select defaultValue={settings.displayLanguage} onValueChange={setDisplayLanguage}>
+                    <Select defaultValue={settings.displayLanguage} onValueChange={handleLanguageChange}>
                         <SelectTrigger className="w-full">
                             <SelectValue placeholder="Select a language" />
                         </SelectTrigger>
                         <SelectContent>
-                            {availableLanguages.map(language => (
-                                <SelectItem key={language} value={language}>
-                                    {formatLanguageName(language)}
+                            {orderedAvailableLanguages.map(language => (
+                                <SelectItem key={language} value={language} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{language}</span>
+                                    <span>{formatLanguageName(language)}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>
@@ -51,9 +64,10 @@ export function LanguageDialog() {
                             <SelectValue placeholder="Select a locale" />
                         </SelectTrigger>
                         <SelectContent>
-                            {availableLocales.map(locale => (
-                                <SelectItem key={locale} value={locale}>
-                                    {formatLanguageName(locale)}
+                            {orderedAvailableLocales.map(locale => (
+                                <SelectItem key={locale} value={locale} className="flex gap-1">
+                                    <span className="uppercase text-muted-foreground">{locale}</span>
+                                    <span>{formatRegionName(locale)}</span>
                                 </SelectItem>
                             ))}
                         </SelectContent>
@@ -62,7 +76,8 @@ export function LanguageDialog() {
             </div>
             <div className="bg-sidebar border border-border rounded-md px-6 py-4 space-y-4">
                 <span className="font-medium block text-accent-foreground">
-                    <Trans>Sample Formatting</Trans>: {settings.displayLocale} {settings.displayLanguage}
+                    <Trans>Sample Formatting</Trans>:{' '}
+                    <span className="text-muted-foreground">{humanReadableLanguageAndLocale}</span>
                 </span>
                 <Select defaultValue={selectedCurrency} onValueChange={setSelectedCurrency}>
                     <SelectTrigger>
@@ -77,15 +92,21 @@ export function LanguageDialog() {
                     </SelectContent>
                 </Select>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Medium date</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Medium date</Trans>
+                    </span>
                     <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'medium' })}</span>
                 </div>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Short date</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Short date</Trans>
+                    </span>
                     <span>{formatDate(new Date('2025-03-14'), { dateStyle: 'short' })}</span>
                 </div>
                 <div className="flex flex-col">
-                    <span className="text-muted-foreground text-sm font-medium">Price</span>
+                    <span className="text-muted-foreground text-sm font-medium">
+                        <Trans>Price</Trans>
+                    </span>
                     <span>{formatCurrency(100.0, selectedCurrency)}</span>
                 </div>
             </div>

package/src/lib/components/layout/manage-languages-dialog.tsx

@@ -17,7 +17,7 @@ import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertCircle, Lock } from 'lucide-react';
 import { useEffect, useState } from 'react';

package/src/lib/components/layout/nav-main.tsx

@@ -15,6 +15,7 @@ import {
     NavMenuSectionPlacement,
 } from '@/vdb/framework/nav-menu/nav-menu-extensions.js';
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
+import { useLingui } from '@lingui/react';
 import { Link, useRouter, useRouterState } from '@tanstack/react-router';
 import { ChevronRight } from 'lucide-react';
 import * as React from 'react';
@@ -41,6 +42,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
     const router = useRouter();
     const routerState = useRouterState();
     const { hasPermissions } = usePermissions();
+    const { i18n } = useLingui();
     const currentPath = routerState.location.pathname;
     const basePath = router.basepath || '';
 
@@ -183,12 +185,16 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
     const renderTopSection = (item: NavMenuSection | NavMenuItem) => {
         if ('url' in item) {
             return (
-                <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+                <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -197,7 +203,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
         }
 
         return (
-            <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
+            <NavItemWrapper key={item.id} locationId={item.id} order={item.order} offset={true}>
                 <Collapsible
                     asChild
                     open={openTopSectionIds.has(item.id)}
@@ -208,7 +214,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                         <CollapsibleTrigger asChild>
                             <SidebarMenuButton tooltip={item.title}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                                 <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
@@ -216,7 +222,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuSub>
                                 {item.items?.map(subItem => (
                                     <NavItemWrapper
-                                        key={subItem.title}
+                                        key={subItem.id}
                                         locationId={subItem.id}
                                         order={subItem.order}
                                         parentLocationId={item.id}
@@ -227,7 +233,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                                                 isActive={isPathActive(subItem.url)}
                                             >
                                                 <Link to={subItem.url}>
-                                                    <span>{subItem.title}</span>
+                                                    <span>{i18n.t(subItem.title)}</span>
                                                 </Link>
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>
@@ -247,10 +253,14 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
             return (
                 <NavItemWrapper key={item.title} locationId={item.id} order={item.order} offset={true}>
                     <SidebarMenuItem>
-                        <SidebarMenuButton tooltip={item.title} asChild isActive={isPathActive(item.url)}>
+                        <SidebarMenuButton
+                            tooltip={i18n.t(item.title)}
+                            asChild
+                            isActive={isPathActive(item.url)}
+                        >
                             <Link to={item.url}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                             </Link>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -267,9 +277,9 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                 >
                     <SidebarMenuItem>
                         <CollapsibleTrigger asChild>
-                            <SidebarMenuButton tooltip={item.title}>
+                            <SidebarMenuButton tooltip={i18n.t(item.title)}>
                                 {item.icon && <item.icon />}
-                                <span>{item.title}</span>
+                                <span>{i18n.t(item.title)}</span>
                                 <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
@@ -277,7 +287,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuSub>
                                 {item.items?.map(subItem => (
                                     <NavItemWrapper
-                                        key={subItem.title}
+                                        key={i18n.t(subItem.title)}
                                         locationId={subItem.id}
                                         order={subItem.order}
                                         parentLocationId={item.id}
@@ -288,7 +298,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                                                 isActive={isPathActive(subItem.url)}
                                             >
                                                 <Link to={subItem.url}>
-                                                    <span>{subItem.title}</span>
+                                                    <span>{i18n.t(subItem.title)}</span>
                                                 </Link>
                                             </SidebarMenuSubButton>
                                         </SidebarMenuSubItem>