66 lines
1.8 KiB
Plaintext
66 lines
1.8 KiB
Plaintext
|
---
|
||
|
|
import { GLOBAL } from "../lib/variables";
|
||
|
|
import Anchor from "./common/Anchor.astro";
|
||
|
|
import ThemeToggle from "./ThemeToggle.astro";
|
||
|
|
---
|
||
|
|
|
||
|
|
<header
|
||
|
|
class="zag-bg zag-border-b zag-transition sticky top-0 w-full z-10"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="zag-bg zag-transition sm:hidden relative z-50 py-4 flex items-center"
|
||
|
|
>
|
||
|
|
<button class="px-4" aria-label="Toggle navigation menu">
|
||
|
|
<svg
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
width="32"
|
||
|
|
height="32"
|
||
|
|
viewBox="0 0 512 512"
|
||
|
|
class="zag-fill zag-transition"
|
||
|
|
>
|
||
|
|
<path d="M80 96h352v32H80zm0 144h352v32H80zm0 144h352v32H80z"></path>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<nav
|
||
|
|
class="zag-bg zag-border-b zag-transition fixed sm:relative inset-x-0 top-0 h-auto sm:px-4 flex justify-between flex-col gap-8 py-4 text-xl sm:flex-row max-w-2xl mx-auto sm:pt-4 sm:border-none"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="flex flex-col font-mono font-medium gap-4 sm:flex-row px-4 sm:px-0 mt-16 sm:mt-0"
|
||
|
|
>
|
||
|
|
{Object.entries(GLOBAL.menu).map((i) => (
|
||
|
|
<Anchor url={i[1]}>{i[0]}</Anchor>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<div class="flex gap-4 justify-between px-4 sm:px-0">
|
||
|
|
<ThemeToggle />
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const button = document.querySelector("button");
|
||
|
|
const nav = document.querySelector("nav");
|
||
|
|
let isOpen = false;
|
||
|
|
|
||
|
|
function updateNavState() {
|
||
|
|
const isMobile = window.matchMedia("(max-width: 640px)").matches;
|
||
|
|
if (isMobile) {
|
||
|
|
nav!.style.transform = isOpen ? "translateY(0)" : "translateY(-100%)";
|
||
|
|
} else {
|
||
|
|
nav!.style.transform = "translateY(0)";
|
||
|
|
isOpen = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleNav() {
|
||
|
|
isOpen = !isOpen;
|
||
|
|
updateNavState();
|
||
|
|
}
|
||
|
|
|
||
|
|
button?.addEventListener("click", toggleNav);
|
||
|
|
window.addEventListener("resize", updateNavState);
|
||
|
|
|
||
|
|
updateNavState();
|
||
|
|
</script>
|