71 lines
2.1 KiB
Plaintext
71 lines
2.1 KiB
Plaintext
---
|
|
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="/spec/"
|
|
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
|
>
|
|
Language spec
|
|
</a>
|
|
<a
|
|
href="/api/std/"
|
|
class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline"
|
|
>
|
|
std reference
|
|
</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>
|