From e985de2609d80ac752a9c458c97b80b8a10befb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= Date: Wed, 18 Mar 2026 23:13:55 +0100 Subject: [PATCH] fix(nav): highlight active navigation links Add active route detection in BaseLayout and apply active styles for docs, blog, and changelog links, including trailing slash support --- public/styles/global.css | 6 ++++-- src/layouts/BaseLayout.astro | 17 ++++++++++++++--- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/public/styles/global.css b/public/styles/global.css index 76557bd..0597b8f 100644 --- a/public/styles/global.css +++ b/public/styles/global.css @@ -170,11 +170,13 @@ a { transition: width 0.3s ease; } -.nav a:hover { +.nav a:hover, +.nav a.active { color: var(--color-text); } -.nav a:hover::after { +.nav a:hover::after, +.nav a.active::after { width: 100%; } diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 5a228ea..9e47202 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -5,6 +5,17 @@ interface Props { } const { title, description = "AI-Native code editor built with Rust and Tauri. Fast, native, and designed for AI-powered development." } = Astro.props; + +const normalizePath = (path: string) => { + if (path.length > 1 && path.endsWith('/')) { + return path.slice(0, -1); + } + + return path; +}; + +const currentPath = normalizePath(Astro.url.pathname); +const isActiveRoute = (path: string) => currentPath === normalizePath(path); --- @@ -58,9 +69,9 @@ const { title, description = "AI-Native code editor built with Rust and Tauri. F