<!-- Simple Navigation -->
<nav class="relative py-2">
    <!-- Mobile Nav -->
    <div class="block lg:hidden" x-data="dropdown">
        <button class="w-6 h-6 absolute top-2 right-2 z-10" @click="toggle()">
            <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
            </svg>
            <svg x-cloak x-show="open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>

        <ul x-cloak x-show="open" x-transition.duration.200ms class="absolute top-10 right-0 w-full min-w-[300px] z-50 bg-white text-slate-900 shadow-sm">
            <li><a href="#" class="block p-4 border-b border-b-slate-200">Services</a></li>
            <li><a href="#" class="block p-4 border-b border-b-slate-200">Company</a></li>
            <li><a href="#" class="block p-4 border-b border-b-slate-200">Developers</a></li>
            <li><a href="#" class="block p-4 border-b border-b-slate-200">Support</a></li>
        </ul>
    </div>

    <!-- Desktop Nav -->
    <ul class="hidden lg:block">

        <li class="relative inline-block">
            <a href="#" class="inline-block px-4 hover:text-purple-600">Services</a>
        </li>
        <li class="relative inline-block">
            <a href="#" class="inline-block px-4 hover:text-purple-600">Company</a>
        </li>
        <li class="relative inline-block">
            <a href="#" class="inline-block px-4 hover:text-purple-600">Developers</a>
        </li>
        <li class="relative inline-block">
            <a href="#" class="inline-block px-4 hover:text-purple-600">Support</a>
        </li>

    </ul>

</nav>

<style type="text/css">
        [x-cloak] { display: none !important; }
</style>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            },
            show() {
                this.open = true
            },
            close() {
                this.open = false
            },
        }))
    })
</script>