jeremy bayseandClaude Sonnet 5
d97cc41ee2
Import the Finlio Mobile design: a fixed bottom tab bar (Accueil/Plan/Suivi/Flux) replaces the duplicated links in the mobile hamburger menu, and the dashboard gets a mobile-first layout — hero "reste à dépenser" card, revenus/épargne tiles, and a spending-by- category list with progress bars — built from the same $sections data the desktop tables use. Desktop dashboard is untouched. The hero card uses a fixed dark background (independent of the light/dark token swap) so its white text holds contrast in both themes, matching how the existing -fill tokens are documented. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
42 lines
2.8 KiB
PHP
42 lines
2.8 KiB
PHP
@php
|
|
$tabs = [
|
|
['route' => 'dashboard', 'label' => 'Accueil', 'icon' => 'home'],
|
|
['route' => 'plan', 'label' => 'Plan', 'icon' => 'grid'],
|
|
['route' => 'suivi', 'label' => 'Suivi', 'icon' => 'list'],
|
|
['route' => 'sankey', 'label' => 'Flux', 'icon' => 'chart'],
|
|
];
|
|
@endphp
|
|
|
|
<nav aria-label="Navigation principale" class="sm:hidden fixed inset-x-0 bottom-0 z-40 pb-[max(env(safe-area-inset-bottom),8px)] pt-2 px-4 bg-surface/90 backdrop-blur border-t border-border">
|
|
<div class="flex justify-around">
|
|
@foreach ($tabs as $tab)
|
|
@continue (! Route::has($tab['route']))
|
|
@php $active = request()->routeIs($tab['route']); @endphp
|
|
<a
|
|
href="{{ route($tab['route']) }}"
|
|
wire:navigate
|
|
aria-current="{{ $active ? 'page' : 'false' }}"
|
|
class="flex flex-col items-center gap-0.5 px-3 py-1 rounded-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring {{ $active ? 'text-brand' : 'text-text-muted' }}"
|
|
>
|
|
<span class="w-6 h-6 flex items-center justify-center rounded-lg {{ $active ? 'bg-brand text-surface' : '' }}">
|
|
@switch($tab['icon'])
|
|
@case('home')
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M3 11l9-8 9 8" /><path d="M5 10v10h14V10" /></svg>
|
|
@break
|
|
@case('grid')
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" /></svg>
|
|
@break
|
|
@case('list')
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M8 6h13M8 12h13M8 18h13" /><path d="M3 6h.01M3 12h.01M3 18h.01" /></svg>
|
|
@break
|
|
@case('chart')
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true"><path d="M3 3v18h18" /><path d="M7 15l4-6 4 3 5-8" /></svg>
|
|
@break
|
|
@endswitch
|
|
</span>
|
|
<span class="text-[10px] font-semibold leading-none">{{ $tab['label'] }}</span>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</nav>
|