Livewire v4 Navigate: SPA-Like Navigation

<!-- Standard navigate - fetches on click -->
<a href="/dashboard" wire:navigate>Dashboard</a>

<!-- Prefetch on hover for faster navigation -->
<a href="/posts" wire:navigate.hover>Posts</a>

<!-- Navigation menu example -->
<nav class="flex gap-4">
    <a href="/" wire:navigate class="hover:text-blue-500">Home</a>
    <a href="/about" wire:navigate.hover class="hover:text-blue-500">About</a>
    <a href="/contact" wire:navigate.hover class="hover:text-blue-500">Contact</a>
</nav>

<!-- Audio player persists across navigation -->
@persist('audio-player')
    <div class="fixed bottom-0 w-full bg-gray-900 p-4">
        <audio id="player" src="{{ $currentTrack }}"></audio>
        <div class="flex items-center gap-4">
            <button onclick="document.getElementById('player').play()">Play</button>
            <span>{{ $trackName }}</span>
        </div>
    </div>
@endpersist

<!-- Shopping cart sidebar persists -->
@persist('cart-sidebar')
    <livewire:cart-sidebar />
@endpersist

<!-- Show loading bar during navigation -->
<div 
    wire:loading.class="opacity-100"
    class="fixed top-0 left-0 h-1 bg-blue-500 opacity-0 transition-opacity"
    style="width: 100%"
></div>

<!-- Or use with Alpine -->
<div 
    x-data="{ navigating: false }"
    x-on:livewire-navigate-start.window="navigating = true"
    x-on:livewire-navigate-end.window="navigating = false"
>
    <div x-show="navigating" class="loading-spinner"></div>
</div>