التنقل في Livewire v4: تنقل شبيه بـ SPA

<!-- تنقل عادي - يجلب عند النقر -->
<a href="/dashboard" wire:navigate>لوحة التحكم</a>

<!-- جلب مسبق عند التمرير لتنقل أسرع -->
<a href="/posts" wire:navigate.hover>المنشورات</a>

<!-- مثال قائمة تنقل -->
<nav class="flex gap-4">
    <a href="/" wire:navigate class="hover:text-blue-500">الرئيسية</a>
    <a href="/about" wire:navigate.hover class="hover:text-blue-500">حول</a>
    <a href="/contact" wire:navigate.hover class="hover:text-blue-500">اتصل</a>
</nav>

<!-- مشغل الصوت يستمر عبر التنقل -->
@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()">تشغيل</button>
            <span>{{ $trackName }}</span>
        </div>
    </div>
@endpersist

<!-- الشريط الجانبي للسلة يستمر -->
@persist('cart-sidebar')
    <livewire:cart-sidebar />
@endpersist

<!-- إظهار شريط تحميل أثناء التنقل -->
<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>

<!-- أو استخدم مع 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>