fix(i18n): localize mobile bottom navigation labels into Spanish (#173)
## Why
### Problem
The mobile bottom tab bar navigation labels (Dashboard, Cashflow,
Accounts, Transactions, Budgets) were being rendered as raw English
strings regardless of the user's locale. Spanish-speaking users would
see English labels in the mobile navigation despite the rest of the app
being translated.
## What
### Changes
- Import the `__()` translation utility in `app-sidebar.tsx`
- Wrap `{item.title}` with `{__(item.title)}` in the mobile bottom tab
bar so labels go through the same translation lookup as the desktop
sidebar
All relevant Spanish translations (`"Dashboard"`, `"Cashflow"`,
`"Accounts"`, `"Transactions"`, `"Budgets"`) were already present in
`lang/es.json`.
## Verification
<img width="343" height="118" alt="image"
src="https://github.com/user-attachments/assets/c58acff7-fdbd-4dda-b2fc-4201865118c1"
/>
This commit is contained in:
parent
9f5e62f736
commit
717bf34103
|
|
@ -30,7 +30,7 @@ export function AppSidebar() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed right-4 bottom-6 left-4 z-50 flex items-center justify-evenly gap-2 rounded-full border border-border/75 bg-sidebar/50 px-4 py-3 shadow-lg shadow-black/20 backdrop-blur md:hidden">
|
||||
<div className="fixed right-4 bottom-6 left-4 z-50 flex items-center justify-evenly gap-2 rounded-full border border-border/75 bg-sidebar/50 px-4 py-4 shadow-lg shadow-black/20 backdrop-blur md:hidden">
|
||||
{mainNavItems.map((item) => {
|
||||
const isActive = page.url.startsWith(resolveUrl(item.href));
|
||||
return (
|
||||
|
|
@ -38,7 +38,7 @@ export function AppSidebar() {
|
|||
key={item.title}
|
||||
href={item.href}
|
||||
className={cn([
|
||||
'flex flex-col items-center justify-center gap-1 text-primary',
|
||||
'flex flex-col items-center justify-center text-primary',
|
||||
'transtion-all duration-200',
|
||||
{
|
||||
'opacity-100': isActive,
|
||||
|
|
@ -47,8 +47,7 @@ export function AppSidebar() {
|
|||
'hover:opacity-75',
|
||||
])}
|
||||
>
|
||||
<item.icon className="size-5 text-primary" />
|
||||
<span className="text-xs">{item.title}</span>
|
||||
<item.icon className="size-6 text-primary" />
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export function getMainNavItems(features: Features): NavItem[] {
|
|||
items.push({
|
||||
type: 'nav-item',
|
||||
title: 'Cashflow',
|
||||
mobileTitle: 'Flujo',
|
||||
href: cashflow(),
|
||||
icon: TrendingUp,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ export interface NavGroup {
|
|||
export interface NavItem {
|
||||
type: 'nav-item';
|
||||
title: string;
|
||||
mobileTitle?: string;
|
||||
href: NonNullable<InertiaLinkProps['href']>;
|
||||
icon?: LucideIcon | ReactNode | null;
|
||||
isActive?: boolean;
|
||||
|
|
|
|||
Loading…
Reference in New Issue