Something went wrong. Try again.
Mirror of https://github.com/kualta/site — web infrastructure
Something went wrong. Try again.
2.1 kB · 63 lines
Astro
at master
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364---import { BackButton } from "./BackButton.tsx";import { ThemeToggle } from "./ThemeToggle.tsx";
const links = [ { href: "/projects", label: "projects" }, { href: "/posts", label: "posts" }, { href: "/music", label: "music" },];
const path = Astro.url.pathname.replace(/\/$/, "") || "/";---<div class="site-header z-[100] flex flex-row place-items-center gap-3 sm:gap-4 text-xl md:text-2xl tracking-wide max-w-full md:max-w-2xl w-full h-fit py-8 px-8"> <div class="hidden sm:flex shrink-0 w-0 h-0 sm:w-8 sm:h-8"> <BackButton path={path} client:load transition:persist /> </div> <nav class="nav-rail min-w-0 flex-1" data-nav-rail aria-label="Main"> <div class="nav-links"> {links.map(({ href, label }) => ( <a class="active:text-secondary-text" href={href} aria-current={path === href ? "page" : undefined} >{label}</a> ))} </div> </nav> <div class="hidden sm:flex shrink-0 w-0 h-0 sm:w-8 sm:h-8"> <ThemeToggle path={path} client:load transition:persist /> </div></div>
<script> // the links only scroll when they no longer fit, and each edge fades only // while there is something past it to scroll to function setupNav() { const rail = document.querySelector<HTMLElement>("[data-nav-rail]"); if (!rail) return;
const update = () => { const hidden = rail.scrollWidth - rail.clientWidth; rail.classList.toggle("fade-left", rail.scrollLeft > 2); rail.classList.toggle("fade-right", rail.scrollLeft < hidden - 2); };
rail.addEventListener("scroll", update, { passive: true }); new ResizeObserver(update).observe(rail);
// a narrow screen should open on the page you are actually reading const current = rail.querySelector<HTMLElement>('a[aria-current="page"]'); if (current) { const offset = current.offsetLeft - (rail.clientWidth - current.offsetWidth) / 2; rail.scrollLeft = Math.max(0, offset); }
update(); }
document.addEventListener("astro:page-load", setupNav);</script>