<nav class="shadow p-4 z-100 bg-secondary ">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-xl font-bold text-stone-700"><a href="/">SPN Patch</a></div>
        <ul class="flex space-x-4 z-50">
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Server License Management</a>
                <ul x-show="open" @click="open = false" @mouseenter="clearTimeout(timer)"
                    @mouseleave="timer = setTimeout(() => open = false, 100)"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 1</a></li>
                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 2</a></li>
                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu 3</a></li>
                </ul>
            </li>
            <li x-data="{ open: false }" wire:click.prevent="loadContent('Patch')"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Patch</a>
            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <span class="cursor-pointer" @click.stop wire:click.prevent="loadContent('SendPatch')">Send Patch</span>
                <ul x-show="open" @click.stop="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="#" wire:click.prevent="loadContent('SendPatch')"
                            class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send Patch</a></li>
                    <li><a href="#" wire:click.prevent="loadContent('SendMultiPatch')"
                            class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Send Multi Patch</a></li>
                    <li><a href="#" wire:click.prevent="loadContent('DeleteMultiPatch')"
                            class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Delete Multi Patch</a></li>
                </ul>

            </li>
            <li x-data="{ open: false }" wire:click.prevent="loadContent('Parameter')"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Parameter</a>
            </li>
            <li x-data="{ open: false }" wire:click.prevent="loadContent('Exchangerate')"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Create Patch Exchangerate</a>
            </li>
            <li x-data="{ open: false }" wire:click.prevent="loadContent('Dischargeport')"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Create Discharge Port</a>
            </li>
            <li x-data="{ open: false, timer: null }" @click.away="open = false" @mouseenter="open = true; clearTimeout(timer)"
                @mouseleave="timer = setTimeout(() => open = false, 100)"
                class="relative px-2 py-1 rounded text-gray-700 hover:bg-primary-focus hover:text-white">
                <a href="#">Configuration</a>
                <ul x-show="open" @click="open = false" @mouseleave="open = false"
                    class="absolute left-0 mt-2 w-48 bg-white shadow-lg">
                    <li><a href="#" wire:click.prevent="loadContent('Role')"
                            class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Role</a></li>
                    <li><a href="#" wire:click.prevent="loadContent('User')"
                            class="block px-4 py-2 text-gray-700 hover:bg-stone-100">User</a>
                    </li>
                    <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-stone-100">Submenu Item 3</a>
                    </li>
                </ul>
            </li>
            <li><a href="#" class="bg-primary text-white px-4 py-2  rounded">Logout</a></li>
            <span>Hello , {{ auth()->user()->USERNAME ?? '' }}</span>
        </ul>
    </div>
</nav>