thp-lang.org/src/components/Navbar.astro

---
const { showSidebarButton = true } = Astro.props;
---

<nav
    class="fixed w-full top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20"
>
    <div class="container mx-auto h-full w-full flex items-center">
        {
            showSidebarButton && (
                <button id="sidebar-toggle" class="w-10 h-full lg:hidden">
                    <i class="ph-bold ph-list text-xl inline-block" />
                </button>
            )
        }

        <a
            href="/"
            class="inline-block px-4 font-display font-black text-2xl hover:underline"
        >
            <img
                class="inline-block h-10"
                src="/img/thp_logo_exp.svg"
                alt="thp"
            />
        </a>
        <a
            href="/learn/"
            class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
        >
            Learn
        </a>
        <a
            href="/how-to/"
            class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
        >
            How to guides
        </a>
        <a
            href="/reference/"
            class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
        >
            Language reference
        </a>
        <a
            href="/api/"
            class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
        >
            Stdlib API
        </a>
    </div>
</nav>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const sidebar = document.getElementById("sidebar");
        const sidebarToggle = document.getElementById("sidebar-toggle");

        if (!sidebar || !sidebarToggle) {
            console.log("Sidebar or Sidebar toggle not found. Not enabling sidebar on mobile");
            return;
        }

        sidebarToggle.addEventListener("click", () => {
            console.log(":D");
            sidebar.classList.toggle("-translate-x-64");
            console.log(sidebar.classList.contains("-translate-x-64"));
        });
    });
</script>