114 lines
3.0 KiB
Plaintext
114 lines
3.0 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-2 justify-between px-2 sm:px-0">
|
|
<div class="rss-container">
|
|
<a
|
|
href="/rss.xml"
|
|
aria-label="RSS Feed"
|
|
class="rss-button zag-interactive"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
class="theme-icon rss-icon"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
class="zag-fill zag-transition"
|
|
d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<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>
|
|
|
|
<style>
|
|
.rss-container {
|
|
position: relative;
|
|
}
|
|
|
|
.rss-button {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
padding: 6px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.rss-button:hover {
|
|
background-color: rgba(128, 128, 128, 0.1);
|
|
border-color: rgba(128, 128, 128, 0.2);
|
|
}
|
|
|
|
.rss-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|