Add mobile bottom tab bar and redesign mobile dashboard

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>
This commit is contained in:
jeremy bayse
2026-08-02 11:16:44 +02:00
co-authored by Claude Sonnet 5
parent a77be2dfba
commit d97cc41ee2
5 changed files with 142 additions and 40 deletions
@@ -116,31 +116,12 @@ new class extends Component
</div>
</div>
{{-- Primary routes (Tableau de bord/Plan/Suivi/Flux) live in the bottom tab
bar on mobile now this menu only needs account/settings links. --}}
<!-- Responsive Navigation Menu -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden mt-2 bg-surface rounded-3xl shadow-sm px-2">
<div class="pt-2 pb-3 space-y-1">
<x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
{{ __('Tableau de bord') }}
</x-responsive-nav-link>
@if (Route::has('plan'))
<x-responsive-nav-link :href="route('plan')" :active="request()->routeIs('plan')" wire:navigate>
{{ __('Plan') }}
</x-responsive-nav-link>
@endif
@if (Route::has('suivi'))
<x-responsive-nav-link :href="route('suivi')" :active="request()->routeIs('suivi')" wire:navigate>
{{ __('Suivi') }}
</x-responsive-nav-link>
@endif
@if (Route::has('sankey'))
<x-responsive-nav-link :href="route('sankey')" :active="request()->routeIs('sankey')" wire:navigate>
{{ __('Flux') }}
</x-responsive-nav-link>
@endif
</div>
<!-- Responsive Settings Options -->
<div class="pt-4 pb-1 border-t border-border">
<div class="pt-2 pb-1">
<div class="px-4">
<div class="font-medium text-base text-text" x-data="{{ json_encode(['name' => auth()->user()->name]) }}" x-text="name" x-on:profile-updated.window="name = $event.detail.name"></div>
<div class="font-medium text-sm text-text-muted">{{ auth()->user()->email }}</div>