Something went wrong. Try again.
version 2 of my website
Something went wrong. Try again.
4.0 kB · 120 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121---import { Birdhouse, TentTree, Trees } from "@lucide/astro";
const pathname = Astro.url.pathname.replace(/\/$/, "") || "/";
const links = [ { name: "Home", href: "/", icon: Birdhouse }, { name: "About", href: "/about", icon: TentTree }, { name: "Blog", href: "/blog", icon: Trees }];
const { className, isMobile = false } = Astro.props;---
<script> function normalizePathname(pathname: string) { return pathname.replace(/\/$/, "") || "/"; }
function resetMobileNav() { const menuButton = document.getElementById("menuToggle"); const mobileNav = document.getElementById("mobileNav"); if (!menuButton) return; menuButton.dataset.state = "closed"; mobileNav?.classList.remove("absolute"); mobileNav?.classList.add("hidden"); }
function updateActiveNav() { const currentPathname = normalizePathname(window.location.pathname);
document.querySelectorAll("[data-nav-link]").forEach((link) => { const href = link.getAttribute("data-nav-link"); const isActive = href === currentPathname;
link.classList.toggle("hover:cursor-default", isActive); link.classList.toggle("animated-link", !isActive); link.setAttribute("aria-current", isActive ? "page" : "false"); }); }
function toggleMobileNav() { const menuButton = document.getElementById("menuToggle"); const mobileNav = document.getElementById("mobileNav"); if (!menuButton) return; if (menuButton.dataset.state === "closed") { menuButton.dataset.state = "open"; mobileNav?.classList.remove("hidden"); mobileNav?.classList.add("absolute"); } else { menuButton.dataset.state = "closed"; mobileNav?.classList.remove("absolute"); mobileNav?.classList.add("hidden"); } }
document.addEventListener("astro:page-load", () => { resetMobileNav(); updateActiveNav(); });
document.addEventListener("click", (event) => { const target = event.target; if (!(target instanceof Element)) return; if (target.closest("#menuToggle")) { toggleMobileNav(); } });
if (document.readyState !== "loading") { resetMobileNav(); updateActiveNav(); } else { document.addEventListener("DOMContentLoaded", () => { resetMobileNav(); updateActiveNav(); }); }</script>
<div class={className}> { isMobile ? ( <div> <nav class="flex gap-3"> {links.map((link) => ( <a data-nav-link={link.href} href={link.href}> {link.name} </a> ))} </nav> </div> ) : ( <div class="surface"> <nav> <ul> {links.map((link) => ( <li> <a class:list={[ "text-green flex gap-2 items-center", pathname === link.href ? "hover:cursor-default" : "animated-link" ]} data-nav-link={link.href} href={link.href} aria-current={pathname === link.href ? "page" : undefined} > <link.icon class="size-4" /> {link.name} </a> </li> ))} </ul> </nav> </div> ) }</div>