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:
co-authored by
Claude Sonnet 5
parent
a77be2dfba
commit
d97cc41ee2
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user