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
+3 -1
View File
@@ -19,7 +19,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased bg-surface-alt text-text">
<div class="min-h-screen bg-surface-alt pb-12">
<div class="min-h-screen bg-surface-alt pb-24 sm:pb-12">
<div class="px-4 pt-4 sm:px-6 lg:px-8">
<livewire:layout.navigation />
</div>
@@ -39,6 +39,8 @@
</main>
</div>
<x-bottom-tab-bar />
@stack('scripts')
</body>
</html>