Hide top nav on mobile, add "Plus" sheet to bottom tab bar
The top nav (logo + hamburger) was still sm:hidden-only on its inner sections but the <nav> element itself had no breakpoint class, so it kept rendering as an empty-looking bar above the new bottom tab bar. Hide the whole element below sm and drop the now-dead hamburger/Alpine toggle and its responsive menu, since nothing renders it anymore. Account/settings links (Profile, Foyer, Catégories, Récurrences, Log Out) that used to live in that hamburger now live in a "Plus" slide-up sheet on the bottom tab bar. Logging out needed a real route since the sheet isn't a Livewire component and can't call the Volt navigation component's method directly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
jeremy bayse
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
d97cc41ee2
commit
6a776b0042
@@ -16,7 +16,9 @@ new class extends Component
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<nav x-data="{ open: false }" class="bg-surface rounded-full shadow-sm">
|
||||
{{-- Hidden on mobile: primary routes live in the bottom tab bar, and
|
||||
account/settings links live in its "Plus" panel — see bottom-tab-bar. --}}
|
||||
<nav class="hidden sm:block bg-surface rounded-full shadow-sm">
|
||||
<!-- Primary Navigation Menu -->
|
||||
<div class="px-2.5 py-2">
|
||||
<div class="flex justify-between items-center">
|
||||
@@ -27,12 +29,12 @@ new class extends Component
|
||||
<span class="w-9 h-9 rounded-full bg-brand flex items-center justify-center shrink-0">
|
||||
<x-application-logo class="block h-5 w-auto text-surface" />
|
||||
</span>
|
||||
<span class="hidden sm:inline font-display text-lg text-text">{{ config('app.name', 'SuiviCPT') }}</span>
|
||||
<span class="font-display text-lg text-text">{{ config('app.name', 'SuiviCPT') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="hidden sm:flex sm:items-center sm:gap-1">
|
||||
<div class="flex items-center gap-1">
|
||||
<x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Tableau de bord') }}
|
||||
</x-nav-link>
|
||||
@@ -55,7 +57,7 @@ new class extends Component
|
||||
</div>
|
||||
|
||||
<!-- Settings Dropdown -->
|
||||
<div class="hidden sm:flex sm:items-center sm:ms-6 gap-2">
|
||||
<div class="flex items-center ms-6 gap-2">
|
||||
<x-theme-toggle />
|
||||
|
||||
<x-dropdown align="right" width="48">
|
||||
@@ -98,67 +100,6 @@ new class extends Component
|
||||
</x-slot>
|
||||
</x-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Hamburger -->
|
||||
<div class="-me-2 flex items-center sm:hidden">
|
||||
<button
|
||||
@click="open = ! open"
|
||||
:aria-expanded="open.toString()"
|
||||
aria-label="Menu"
|
||||
class="inline-flex items-center justify-center p-2 rounded-md text-text-muted hover:text-text hover:bg-surface-alt focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring transition duration-150 ease-in-out"
|
||||
>
|
||||
<svg class="h-6 w-6" aria-hidden="true" stroke="currentColor" fill="none" viewBox="0 0 24 24">
|
||||
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</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">
|
||||
<!-- Responsive Settings Options -->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
<x-theme-toggle />
|
||||
</div>
|
||||
|
||||
<div class="mt-3 space-y-1">
|
||||
<x-responsive-nav-link :href="route('profile')" wire:navigate>
|
||||
{{ __('Profile') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
<x-responsive-nav-link :href="route('household.settings')" wire:navigate>
|
||||
{{ __('Foyer') }}
|
||||
</x-responsive-nav-link>
|
||||
|
||||
@if (Route::has('categories'))
|
||||
<x-responsive-nav-link :href="route('categories')" wire:navigate>
|
||||
{{ __('Catégories') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
|
||||
@if (Route::has('recurring'))
|
||||
<x-responsive-nav-link :href="route('recurring')" wire:navigate>
|
||||
{{ __('Récurrences') }}
|
||||
</x-responsive-nav-link>
|
||||
@endif
|
||||
|
||||
<!-- Authentication -->
|
||||
<button wire:click="logout" class="w-full text-start">
|
||||
<x-responsive-nav-link>
|
||||
{{ __('Log Out') }}
|
||||
</x-responsive-nav-link>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user