ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nav): highlight active navigation links

Browse Source 
Add active route detection in BaseLayout and apply active styles
for docs, blog, and changelog links, including trailing slash support
This commit is contained in:
Stig-Ørjan Smelror
2026-03-18 23:13:55 +01:00
parent 30275bd314
commit e985de2609
2 changed files with 18 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/global.css
+4 -2
View File
@@ -170,11 +170,13 @@ a {
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.nav a:hover { .nav a:hover,
.nav a.active {
color: var(--color-text); color: var(--color-text);
} }
.nav a:hover::after { .nav a:hover::after,
.nav a.active::after {
width: 100%; width: 100%;
} }
src/layouts/BaseLayout.astro
+14 -3
View File
@@ -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 { 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);
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -58,9 +69,9 @@ const { title, description = "AI-Native code editor built with Rust and Tauri. F
</a> </a>
<nav class="nav"> <nav class="nav">
<a href="/#philosophy">Why Blade</a> <a href="/#philosophy">Why Blade</a>
<a href="/docs">Docs</a> <a href="/docs" class={isActiveRoute('/docs') ? 'active' : undefined} aria-current={isActiveRoute('/docs') ? 'page' : undefined}>Docs</a>
<a href="/blog">Blog</a> <a href="/blog" class={isActiveRoute('/blog') ? 'active' : undefined} aria-current={isActiveRoute('/blog') ? 'page' : undefined}>Blog</a>
<a href="/changelog">Changelog</a> <a href="/changelog" class={isActiveRoute('/changelog') ? 'active' : undefined} aria-current={isActiveRoute('/changelog') ? 'page' : undefined}>Changelog</a>
<a href="/#download">Download</a> <a href="/#download">Download</a>
<a href="https://zaguanai.com/pricing" target="_blank" rel="noopener">Pricing</a> <a href="https://zaguanai.com/pricing" target="_blank" rel="noopener">Pricing</a>
</nav> </nav>