Add sliding page transitions between Proxmox extension pages

extensions/Servers/Proxmox/views/components/layout.blade.php

@@ -1598,6 +1598,44 @@
 
             <div class="mb-10 mt-3">
                 <style>
+                    /* Page Transition Styles */
+                    .proxmox-page-content {
+                        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+                    }
+                    
+                    @keyframes slideIn {
+                        from {
+                            opacity: 0;
+                            transform: translateX(20px);
+                        }
+                        to {
+                            opacity: 1;
+                            transform: translateX(0);
+                        }
+                    }
+                    
+                    @keyframes slideOut {
+                        from {
+                            opacity: 1;
+                            transform: translateX(0);
+                        }
+                        to {
+                            opacity: 0;
+                            transform: translateX(-20px);
+                        }
+                    }
+                    
+                    .proxmox-page-exit {
+                        animation: slideOut 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+                    }
+                    
+                    @media (prefers-reduced-motion: reduce) {
+                        .proxmox-page-content,
+                        .proxmox-page-exit {
+                            animation: none;
+                        }
+                    }
+                    
                     /* Modern Navigation Styles */
                     .proxmox-nav-container {
                         background: color-mix(in srgb, var(--color-background-secondary) 60%, transparent);
@@ -2309,7 +2347,7 @@
                 </div>
             </div>
             <div class="flex-1 flex flex-col">
-                <div class="flex-1 flex flex-col">
+                <div class="flex-1 flex flex-col proxmox-page-content" wire:key="proxmox-page-{{ $view }}">
                     {{ $slot }}
                 </div>
             </div>
@@ -3218,4 +3256,13 @@ window.saveServerIcon = function() {
         console.error('Error saving icon:', error);
     });
 };
+
+// Page transition handling for Livewire navigation
+document.addEventListener('livewire:navigate', () => {
+    const pageContent = document.querySelector('.proxmox-page-content');
+    if (pageContent) {
+        pageContent.classList.remove('proxmox-page-content');
+        pageContent.classList.add('proxmox-page-exit');
+    }
+});
 </script>