Livewire's wire:navigate issue

Anyone Help me, Please!

@minhazul18 have you called the correct layout file in your components?

yes, in the master layout, I've a nav layout called navbar and so sidebar.

those are working but some parts of them not working such as some buttons. I think there could be a DOM issue cause after refreshing the URL, they working fine!

this is the code for my navigation:

    <div class="adm_nav_container">
        <div class="admin_nav_child">
            <x-admin.adm-nav-link :href="route('Manage Users')" :status="request()->routeIs('Manage Users')||request()->routeIs('User Details')" wire:navigate>
                {{ __('Manage Users') }}
            </x-admin.adm-nav-link>
        </div>
        <div class="admin_nav_child">
            <x-admin.adm-nav-link :href="route('Admin Dashboard')" :status="request()->routeIs('Admin Dashboard')" wire:navigate >
                {{ __('Admin Dashboard') }}
            </x-admin.adm-nav-link>
        </div>
    </div>

and this is my button code:

<div class="flex-row search-container no-select container-full mar-1rem p-relative d-flex d-center">
        <span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                    d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
            </svg>
        </span>
        <input class="search-input container-full d-flex" type="text" name="query" wire:model.live.debounce.500ms="query"
            placeholder="Search for ID or Name" max="255" min="0">
        <button wire:click.prevent="resetSearchbar">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                    d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
            </svg>
        </button>
    </div>

this is the livewire for resetSearchBar function

<?php

namespace App\Livewire\Admin;

use App\Models\Role;
use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
use Illuminate\Support\Benchmark;
use Livewire\Attributes\Js;
use Livewire\Attributes\On;

class ManageUsers extends Component
{

    use WithPagination;

    public $query = '';

				//other code

    public function resetSearchbar()   {
        $this->reset('query');
    }
				//other code

May be this will help anyone but my code was not running properly so I added a tiny timeout and then executed my code and that worked. Another thing is the "data-navigate-once" tag that I added. Before this my event listeners were stacking and were firing multiple times in a single navigate

<script data-navigate-once>
    document.addEventListener('livewire:navigated', () => {
        setTimeout(function(){
           //Code here
        }, 1);
    });
</script>

this work ///' '///

=>color-modes.js

document.addEventListener("livewire:navigated", () => { // Get all dark-light switchers console.log("color mode js"); var switchers = document.querySelectorAll(".dark-light-switcher");

// Function to update icons and theme
function updateTheme(isDarkMode) {
    switchers.forEach(function (switcher) {
        var darkIcon = switcher.querySelector(".ri-sun-line");
        var lightIcon = switcher.querySelector(".ri-contrast-2-line");

        if (isDarkMode) {
            lightIcon.style.display = "none";
            darkIcon.style.display = "block";
        } else {
            lightIcon.style.display = "block";
            darkIcon.style.display = "none";
        }
    });