From 717bf34103855cdb7c39fb6fab2559f8f797782e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Falc=C3=B3n?= <victoor89@gmail.com>
Date: Sun, 1 Mar 2026 12:04:44 +0000
Subject: [PATCH] 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"
/>
---
 resources/js/components/app-sidebar.tsx       | 7 +++----
 resources/js/providers/menu-item-provider.tsx | 1 +
 resources/js/types/index.d.ts                 | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/app-sidebar.tsx
index 40f9ad43..31bbfdca 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/app-sidebar.tsx
@@ -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>
                     );
                 })}
diff --git a/resources/js/providers/menu-item-provider.tsx b/resources/js/providers/menu-item-provider.tsx
index d8e4c277..7308c455 100644
--- a/resources/js/providers/menu-item-provider.tsx
+++ b/resources/js/providers/menu-item-provider.tsx
@@ -26,6 +26,7 @@ export function getMainNavItems(features: Features): NavItem[] {
         items.push({
             type: 'nav-item',
             title: 'Cashflow',
+            mobileTitle: 'Flujo',
             href: cashflow(),
             icon: TrendingUp,
         });
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index c2cde304..3187c8f7 100644
--- a/resources/js/types/index.d.ts
+++ b/resources/js/types/index.d.ts
@@ -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;