I have a bug in livewire navigation when I use wire: navigation , when I click from home page to Contact it works fine it open the page without loading the browser but getting a issue at loading is , suppose if I am at footer of home page or down of home page and click to contact or any link it will open at the footer area where I was in 1st page , how to solve this
my front-navigation.blade.php
<div>
<header style="z-index: 999;">
<nav id="navbar" style="z-index: 999;" class="fixed inset-x-0 z-20 w-full border-b border-gray-100 bg-white/80 backdrop-blur dark:border-gray-700/30 dark:bg-gray-900/80">
<div class="mx-auto px-4 sm:px-12 xl:max-w-6xl xl:px-0">
<div class="relative flex flex-wrap items-center justify-between gap-6 lg:gap-0 lg:py-4">
<div class="relative z-20 flex w-full justify-between md:px-0 lg:w-max">
<a wire:navigate href="/" aria-label="logo" class="flex items-center space-x-2">
<p style="font-size: 30px; font-weight: bold;">GigaCode</p>
</a>
<button aria-label="humburger" id="hamburger" class="relative -mr-6 p-6 lg:hidden">
<div aria-hidden="true" class="m-auto h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
<div aria-hidden="true" class="m-auto mt-2 h-0.5 w-5 rounded bg-sky-900 transition duration-300 dark:bg-gray-300"></div>
</button>
</div>
<div id="layer" aria-hidden="true" class="fixed inset-0 z-10 h-screen w-screen origin-bottom scale-y-0 bg-white/70 backdrop-blur-2xl transition duration-500 dark:bg-gray-900/70 lg:hidden"></div>
<div id="navlinks" class="invisible absolute top-full left-0 z-20 w-full origin-top-right translate-y-1 scale-90 flex-col flex-wrap justify-end gap-6 rounded-3xl border border-gray-100 bg-white p-8 opacity-0 shadow-2xl shadow-gray-600/10 transition-all duration-300 dark:border-gray-700 dark:bg-gray-800 dark:shadow-none lg:visible lg:relative lg:flex lg:w-auto lg:translate-y-0 lg:scale-100 lg:flex-row lg:items-center lg:gap-0 lg:border-none lg:bg-transparent lg:p-0 lg:opacity-100 lg:shadow-none lg:peer-checked:translate-y-0 dark:lg:bg-transparent">
<div class="text-gray-600 dark:text-gray-300 lg:pr-4">
<ul class="space-y-6 text-base font-medium tracking-wide lg:flex lg:space-y-0 lg:text-sm">
<li>
<a href="./pages/solution.html" class="block transition hover:text-primary dark:hover:text-primaryLight md:px-4">
<span>Work</span>
</a>
</li>
<li>
<a href="./pages/customers.html" class="block transition hover:text-primary dark:hover:text-primaryLight md:px-4">
<span>Services</span>
</a>
</li>
<li>
<a href="./pages/pricing.html" class="block transition hover:text-primary dark:hover:text-primaryLight md:px-4">
<span>Pricing</span>
</a>
</li>
<li>
<a href="./pages/blog.html" class="block transition hover:text-primary dark:hover:text-primaryLight md:px-4">
<span>News</span>
</a>
</li>
<li>
<a href="./pages/about.html" class="block transition hover:text-primary dark:hover:text-primaryLight md:px-4">
<span>Company</span>
</a>
</li>
</ul>
</div>
<div class="mt-12 -ml-1 flex w-full flex-col space-y-2 border-primary/10 dark:border-gray-700 sm:flex-row md:w-max lg:mt-0 lg:mr-6 lg:space-y-0 lg:border-l lg:pl-6">
<a wire:navigate href="/register" class="relative ml-auto flex h-9 w-full items-center justify-center before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 dark:before:border-gray-700 dark:before:bg-primaryLight sm:px-4 lg:before:border lg:before:border-gray-200 lg:before:bg-gray-100 lg:dark:before:bg-gray-800">
<span class="relative text-sm font-semibold text-black dark:text-gray-900 lg:text-primary lg:dark:text-white">Get started</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
</div>
my app.blade.php code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.2fc4673e.svg">
<link href="https://fonts.googleapis.com/css2? family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,4 00&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
<!-- Livewire Components -->
@livewire('front-navigation')
{{ $slot }}
@livewire('front-footer')
<!-- External JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
@livewireScripts
</body>
</html>
