<nav class="bg-gray-800 fixed w-full top-0 z-3">
    <div class="mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <a href="/" class="text-white font-bold text-xl"
                    >Fede Landing Site</a
                >
            </div>
            <!-- Desktop Menu -->
            <div class="hidden md:flex">
                <a
                    href="/git"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >Git</a
                >
                <a
                    class="text-gray-300 hover:text-white px-3 py-2 muted"
                    title="Under Construction 🚧👷‍♂️🏗️"
                    target="_blank"
                    >CV</a
                >
                <a
                    href="https://github.com/fedpo2"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >GitHub</a
                >
                <a
                    href="mailto:federico.nicolas.polidoro@gmail.com"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >Email</a
                >
                <a
                    href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
                    target="_blank"
                    class="text-gray-300 hover:text-white px-3 py-2"
                    >LinkedIn</a
                >
            </div>
            <!-- Mobile Menu Button -->
            <div class="md:hidden cursor-context-menu">
                <button
                    onclick="toggleOffCanvas()"
                    class="border px-2 py-1 rounded text-white"
                >
                    <svg
                        class="h-6 w-6"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="M0 6h25M0 12h25M0 18h25"
                        />
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <!-- Off-canvas Menu -->
    <div
        id="offCanvas"
        class="fixed top-16 right-0 w-64 h-screen bg-gray-800 transform translate-x-full transition-transform duration-200 ease-in-out"
    >
        <div class="flex flex-col p-4">
            <a
                href="/git"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >Git</a
            >
            <a
                class="text-gray-300 hover:text-white px-3 py-2 muted"
                title="Under Construction 🚧👷‍♂️🏗️"
                target="_blank"
                >CV</a
            >
            <a
                href="https://github.com/fedpo2"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >GitHub</a
            >
            <a
                href="mailto:federico.nicolas.polidoro@gmail.com"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >Email</a
            >
            <a
                href="https://www.linkedin.com/in/federico-polidoro-40137a25b/"
                target="_blank"
                class="text-gray-300 hover:text-white px-3 py-2"
                >LinkedIn</a
            >
        </div>
    </div>
</nav>
<script>
    function toggleOffCanvas() {
        const offCanvas = document.getElementById("offCanvas");
        offCanvas.classList.toggle("translate-x-full");
    }
</script>
