<nav class="bg-white shadow p-4 z-100">
    <div class="container mx-auto flex justify-between items-center">
        <div class="text-xl font-bold text-stone-700">SPN Patch</div>
        <ul class="flex space-x-4 z-50">
            <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" class="relative">
                <a href="#" class="text-gray-700 hover:text-stone-700">Server License Management</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="#" 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 }" @click.away="open = false" @mouseenter="open = true" class="relative">
                <a href="#" class="text-gray-700 hover:text-stone-700">Patch Management</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="#" 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('SendPatch')" class="relative">
                <a href="#" class="text-gray-700 hover:text-stone-700">Send Patch</a>
            </li>
            <li x-data="{ open: false }" @click.away="open = false" @mouseenter="open = true" class="relative">
                <a href="#" class="text-gray-700 hover:text-stone-700">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-stone-700 text-white px-4 py-2 rounded">Logout</a></li>
            <span>Hello , {{ auth()->user()->USERNAME ?? '' }}</span>
        </ul>
    </div>
</nav>
