Merge pull request #4796 from peaklabs-dev/fix-navigation

Feat: Improve navigation performance

resources/views/components/navbar.blade.php

@@ -123,7 +123,7 @@
             <ul role="list" class="flex flex-col h-full space-y-1.5">
                 @if (isSubscribed() || !isCloud())
                     <li>
-                        <a title="Dashboard" href="/"
+                        <a title="Dashboard" href="/" wire:navigate
                             class="{{ request()->is('/') ? 'menu-item-active menu-item' : 'menu-item' }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
@@ -134,7 +134,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Projects"
+                        <a title="Projects" wire:navigate
                             class="{{ request()->is('project/*') || request()->is('projects') ? 'menu-item menu-item-active' : 'menu-item' }}"
                             href="/projects">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
@@ -149,7 +149,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Servers"
+                        <a title="Servers" wire:navigate
                             class="{{ request()->is('server/*') || request()->is('servers') ? 'menu-item menu-item-active' : 'menu-item' }}"
                             href="/servers">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24"
@@ -168,7 +168,7 @@
                     </li>
 
                     <li>
-                        <a title="Sources"
+                        <a title="Sources" wire:navigate
                             class="{{ request()->is('source*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('source.all') }}">
                             <svg class="icon" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
@@ -179,7 +179,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Destinations"
+                        <a title="Destinations" wire:navigate
                             class="{{ request()->is('destination*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('destination.index') }}">
 
@@ -192,7 +192,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="S3 Storages"
+                        <a title="S3 Storages" wire:navigate
                             class="{{ request()->is('storages*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('storage.index') }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
@@ -207,7 +207,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Shared variables"
+                        <a title="Shared variables" wire:navigate
                             class="{{ request()->is('shared-variables*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('shared-variables.index') }}">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24">
@@ -222,7 +222,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Notifications"
+                        <a title="Notifications" wire:navigate
                             class="{{ request()->is('notifications*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('notifications.email') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -234,7 +234,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Keys & Tokens"
+                        <a title="Keys & Tokens" wire:navigate
                             class="{{ request()->is('security*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('security.private-key.index') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -246,7 +246,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Tags"
+                        <a title="Tags" wire:navigate
                             class="{{ request()->is('tags*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('tags.show') }}">
                             <svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -261,7 +261,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Terminal"
+                        <a title="Terminal" wire:navigate
                             class="{{ request()->is('terminal*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('terminal') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -275,7 +275,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Profile"
+                        <a title="Profile" wire:navigate
                             class="{{ request()->is('profile*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('profile') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -290,7 +290,7 @@
                         </a>
                     </li>
                     <li>
-                        <a title="Teams"
+                        <a title="Teams" wire:navigate
                             class="{{ request()->is('team*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('team.index') }}">
                             <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -309,7 +309,7 @@
                     </li>
                     @if (isCloud())
                         <li>
-                            <a title="Subscription"
+                            <a title="Subscription" wire:navigate
                                 class="{{ request()->is('subscription*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                                 href="{{ route('subscription.show') }}">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -324,7 +324,7 @@
                     @if (isInstanceAdmin())
                         <li>
 
-                            <a title="Settings"
+                            <a title="Settings" wire:navigate
                                 class="{{ request()->is('settings*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                                 href="/settings">
                                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
@@ -343,7 +343,7 @@
                     @if (isCloud() || isDev())
                         @if (isInstanceAdmin() || session('impersonating'))
                             <li>
-                                <a title="Admin" class="menu-item" href="/admin">
+                                <a wire:navigate title="Admin" class="menu-item" href="/admin">
                                     <svg class="text-pink-600 icon" viewBox="0 0 256 256"
                                         xmlns="http://www.w3.org/2000/svg">
                                         <path fill="currentColor"
@@ -363,7 +363,7 @@
                         @endpersist
                     @endif
                     <li>
-                        <a title="Onboarding"
+                        <a title="Onboarding" wire:navigate
                             class="{{ request()->is('onboarding*') ? 'menu-item-active menu-item' : 'menu-item' }}"
                             href="{{ route('onboarding') }}">
                             <svg class="icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">

resources/views/components/notification/navbar.blade.php

@@ -4,22 +4,27 @@
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>
             </a>
             <a class="{{ request()->routeIs('notifications.discord') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.discord') }}">
                 <button>Discord</button>
             </a>
              <a class="{{ request()->routeIs('notifications.telegram') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.telegram') }}">
                 <button>Telegram</button>
             </a>
             <a class="{{ request()->routeIs('notifications.slack') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.slack') }}">
                 <button>Slack</button>
             </a>
             <a class="{{ request()->routeIs('notifications.pushover') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('notifications.pushover') }}">
                 <button>Pushover</button>
             </a>

resources/views/components/resources/breadcrumbs.blade.php

@@ -8,6 +8,7 @@
         <li class="inline-flex items-center">
             <div class="flex items-center">
                 <a class="text-xs truncate lg:text-sm"
+                    wire:navigate
                     href="{{ route('project.show', ['project_uuid' => data_get($resource, 'environment.project.uuid')]) }}">
                     {{ data_get($resource, 'environment.project.name', 'Undefined Name') }}</a>
                 <svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold dark:text-warning" fill="currentColor"
@@ -21,6 +22,7 @@
         <li>
             <div class="flex items-center">
                 <a class="text-xs truncate lg:text-sm"
+                    wire:navigate
                     href="{{ route('project.resource.index', [
                         'environment_uuid' => data_get($resource, 'environment.uuid'),
                         'project_uuid' => data_get($resource, 'environment.project.uuid'),

resources/views/components/security/navbar.blade.php

@@ -3,10 +3,10 @@
     <div class="subtitle">Security related settings.</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 scrollbar min-h-10">
-            <a href="{{ route('security.private-key.index') }}">
+            <a wire:navigate href="{{ route('security.private-key.index') }}">
                 <button>Private Keys</button>
             </a>
-            <a href="{{ route('security.api-tokens') }}">
+            <a wire:navigate href="{{ route('security.api-tokens') }}">
                 <button>API tokens</button>
             </a>
         </nav>

resources/views/components/server/navbar.blade.php

@@ -18,7 +18,7 @@
     <div class="subtitle">{{ data_get($server, 'name') }}</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 overflow-x-scroll sm:overflow-x-hidden scrollbar min-h-10 whitespace-nowrap">
-            <a class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.show') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.show', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
@@ -26,20 +26,20 @@
             </a>
 
             @if (!$server->isSwarmWorker() && !$server->settings->is_build_server)
-                <a class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
+                <a wire:navigate class="{{ request()->routeIs('server.proxy') ? 'dark:text-white' : '' }}"
                     href="{{ route('server.proxy', [
                         'server_uuid' => data_get($server, 'uuid'),
                     ]) }}">
                     <button>Proxy</button>
                 </a>
             @endif
-            <a class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.resources') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.resources', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">
                 <button>Resources</button>
             </a>
-            <a class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
+            <a wire:navigate class="{{ request()->routeIs('server.command') ? 'dark:text-white' : '' }}"
                 href="{{ route('server.command', [
                     'server_uuid' => data_get($server, 'uuid'),
                 ]) }}">

resources/views/components/server/sidebar-proxy.blade.php

@@ -1,14 +1,14 @@
 @if ($server->proxySet())
     <div class="flex flex-col items-start gap-2 min-w-fit">
-        <a class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy', $parameters) }}">
             <button>Configuration</button>
         </a>
-        <a class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy.dynamic-confs') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy.dynamic-confs', $parameters) }}">
             <button>Dynamic Configurations</button>
         </a>
-        <a class="{{ request()->routeIs('server.proxy.logs') ? 'menu-item menu-item-active' : 'menu-item' }}"
+        <a wire:navigate class="{{ request()->routeIs('server.proxy.logs') ? 'menu-item menu-item-active' : 'menu-item' }}"
             href="{{ route('server.proxy.logs', $parameters) }}">
             <button>Logs</button>
         </a>

resources/views/components/server/sidebar.blade.php

@@ -1,31 +1,31 @@
 <div class="flex flex-col items-start gap-2 min-w-fit">
-    <a class="menu-item {{ $activeMenu === 'general' ? 'menu-item-active' : '' }}"
+    <a wire:navigate class="menu-item {{ $activeMenu === 'general' ? 'menu-item-active' : '' }}"
         href="{{ route('server.show', ['server_uuid' => $server->uuid]) }}">General</a>
     @if ($server->isFunctional())
-        <a class="menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'advanced' ? 'menu-item-active' : '' }}"
             href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}">Advanced
         </a>
     @endif
-    <a class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
+    <a wire:navigate class="menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}"
         href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}">Private Key
     </a>
     @if (!$server->isLocalhost())
-        <a class="menu-item {{ $activeMenu === 'cloudflare-tunnels' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'cloudflare-tunnels' ? 'menu-item-active' : '' }}"
             href="{{ route('server.cloudflare-tunnels', ['server_uuid' => $server->uuid]) }}">Cloudflare
             Tunnels</a>
     @endif
     @if ($server->isFunctional())
-        <a class="menu-item {{ $activeMenu === 'destinations' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'destinations' ? 'menu-item-active' : '' }}"
             href="{{ route('server.destinations', ['server_uuid' => $server->uuid]) }}">Destinations
         </a>
-        <a class="menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}"
             href="{{ route('server.log-drains', ['server_uuid' => $server->uuid]) }}">Log
             Drains</a>
-        <a class="menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}"
             href="{{ route('server.charts', ['server_uuid' => $server->uuid]) }}">Metrics</a>
     @endif
     @if (!$server->isLocalhost())
-        <a class="menu-item {{ $activeMenu === 'danger' ? 'menu-item-active' : '' }}"
+        <a wire:navigate class="menu-item {{ $activeMenu === 'danger' ? 'menu-item-active' : '' }}"
             href="{{ route('server.delete', ['server_uuid' => $server->uuid]) }}">Danger</a>
     @endif
 </div>

resources/views/components/settings/navbar.blade.php

@@ -4,18 +4,20 @@
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('settings.index') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('settings.index') }}">
                 <button>Configuration</button>
             </a>
             <a class="{{ request()->routeIs('settings.backup') ? 'dark:text-white' : '' }}"
+                wire:navigate
                 href="{{ route('settings.backup') }}">
                 <button>Backup</button>
             </a>
-            <a class="{{ request()->routeIs('settings.email') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('settings.email') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('settings.email') }}">
                 <button>Transactional Email</button>
             </a>
-            <a class="{{ request()->routeIs('settings.oauth') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('settings.oauth') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('settings.oauth') }}">
                 <button>OAuth</button>
             </a>

resources/views/components/team/navbar.blade.php

@@ -8,15 +8,16 @@
     <div class="subtitle">Team wide configurations.</div>
     <div class="navbar-main">
         <nav class="flex items-center gap-6 min-h-10">
-            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" href="{{ route('team.index') }}">
+            <a class="{{ request()->routeIs('team.index') ? 'dark:text-white' : '' }}" wire:navigate
+                href="{{ route('team.index') }}">
                 <button>General</button>
             </a>
-            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}"
+            <a class="{{ request()->routeIs('team.member.index') ? 'dark:text-white' : '' }}" wire:navigate
                 href="{{ route('team.member.index') }}">
                 <button>Members</button>
             </a>
             @if (isInstanceAdmin())
-                <a class="{{ request()->routeIs('team.admin-view') ? 'dark:text-white' : '' }}"
+                <a class="{{ request()->routeIs('team.admin-view') ? 'dark:text-white' : '' }}" wire:navigate
                     href="{{ route('team.admin-view') }}">
                     <button>Admin View</button>
                 </a>