From b8efff4eb4c2c6042d2477f769b64a1cbf1d0f3e Mon Sep 17 00:00:00 2001
From: peaklabs-dev <122374094+peaklabs-dev@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:36:33 +0100
Subject: [PATCH] fix: use wire:navigate on sidebar

- This makes the app feel like a single page application because it does not reload anything - before it reloaded each time.
- It makes the whole navigation experience much smoother.
---
 resources/views/components/navbar.blade.php | 34 ++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index 9a75200b1..d6075248f 100644
--- a/resources/views/components/navbar.blade.php
+++ b/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">