Move the navigation into a floating toolbar at the bottom

The top app bar repeated the site's name, which already heads the upload and download pages, and spread its actions to the window's far edge. A floating toolbar centred above the bottom edge, as wide as its buttons, now holds them: Upload and the admin pages with the current one filled, and the account menu; guests get Upload, the theme toggle and Log in, without tooltips. On a phone the sign-in card no longer stretches to the full height, and the admin dashboard's empty state sits outside the scrolling table. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
2026-09-13 11:12:12 +02:00
parent 2a363defd1
commit accbc17c1c
8 changed files with 161 additions and 98 deletions
@@ -3,10 +3,8 @@
    <head>
        @include('partials.head')
    </head>
-    <body class="flex min-h-dvh flex-col bg-surface font-sans text-on-surface antialiased">
-        @include('partials.app-bar')
-
-        <main class="flex flex-1 justify-center px-4 pt-6 pb-16 sm:items-center sm:pt-0">
+    <body class="flex min-h-dvh flex-col bg-surface font-sans text-on-surface antialiased [--material-bottom-bar:calc(5rem+env(safe-area-inset-bottom))]">
+        <main class="flex flex-1 items-start justify-center px-4 pt-8 pb-32 sm:items-center">
            <div class="w-full max-w-md rounded-corner-xl bg-surface-container-low p-6 sm:p-8">
                <div class="flex flex-col gap-6">
                    {{ $slot }}
@@ -14,6 +12,8 @@
            </div>
        </main>

+        @include('partials.toolbar')
+
        <x-toast />
    </body>
 </html>