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:
Víctor Falcón 2026-03-01 12:04:44 +00:00 committed by GitHub
parent 9f5e62f736
commit 717bf34103
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 4 deletions

View File

@ -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>
);
})}

View File

@ -26,6 +26,7 @@ export function getMainNavItems(features: Features): NavItem[] {
items.push({
type: 'nav-item',
title: 'Cashflow',
mobileTitle: 'Flujo',
href: cashflow(),
icon: TrendingUp,
});

View File

@ -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;