refactor: move active link handling to JavaScript

src/components/ActiveNavigationCheck.astro

@@ -0,0 +1,20 @@
+---
+---
+
+<script>
+	function setActiveLink() {
+		const links = document.querySelectorAll('.navigation a');
+		const currentPath = window.location.pathname;
+		console.log(currentPath);
+
+		links.forEach((link) => {
+			if (link.getAttribute('href') === currentPath) {
+				link.classList.add('is-active');
+			} else {
+				link.classList.remove('is-active');
+			}
+		});
+	}
+
+	setActiveLink();
+</script>

src/components/MainNavigation.astro

@@ -1,15 +1,11 @@
 ---
-import cx from 'classnames';
-
 import { Link } from '.';
 
 import navigation from '../data/navigation.json';
-
-const currentPath = new URL(Astro.request.url).pathname;
 ---
 
 <nav
-	class="col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
+	class="navigation col-span-12 col-start-4 self-center md:col-span-14 md:col-start-3"
 	role="navigation"
 	aria-label="Main"
 >
@@ -18,10 +14,7 @@ const currentPath = new URL(Astro.request.url).pathname;
 			navigation.map(({ title, url }) => (
 				<li class="mie-[10px] xs:mie-[15px]">
 					<Link
-						class={cx(
+						class="text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
-							'text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20',
-							{ 'underline !decoration-accent decoration-4': currentPath === url }
-						)}
 						href={url}
 					>
 						{title}

src/components/Subnavigation.astro

@@ -1,24 +1,17 @@
 ---
-import cx from 'classnames';
-
 import data from '../data/subnavigation.json';
 
 import { Link } from '.';
-
-const currentPath = new URL(Astro.request.url).pathname;
 ---
 
-<nav class="glow flex gap-12" aria-label="Subnavigation">
+<nav class="navigation glow flex gap-12" aria-label="Subnavigation" role="navigation">
 	<ul>
 		{
 			data.main.map(({ title, url }) => (
 				<li>
 					<Link
 						href={url}
-						class={cx(
+						class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
-							'font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20',
-							{ 'underline !decoration-accent decoration-4': currentPath === url }
-						)}
 					>
 						{title}
 					</Link>
@@ -32,9 +25,7 @@ const currentPath = new URL(Astro.request.url).pathname;
 				<li>
 					<Link
 						href={url}
-						class={`font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+						class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
-							currentPath === url && 'underline !decoration-accent decoration-4'
-						}`}
 					>
 						{title}
 					</Link>

src/layouts/BaseLayout.astro

@@ -9,6 +9,7 @@ import ThemeProvider from '../components/ThemeProvider.astro';
 import PageHeader from '../components/PageHeader.astro';
 import PageFooter from '../components/PageFooter.astro';
 import Sal from '../components/Sal.astro';
+import ActiveNavigationCheck from '../components/ActiveNavigationCheck.astro';
 
 export interface Props {
 	backLink?: string;
@@ -152,6 +153,7 @@ const webManifest = isProduction && {
 		</script>
 
 		<Sal />
+		<ActiveNavigationCheck />
 
 		<ThemeProvider />
 	</head>

src/styles/global.css

@@ -166,6 +166,10 @@
 }
 
 @layer components {
+	.navigation .is-active {
+		@apply underline !decoration-accent decoration-4;
+	}
+
 	.image-shadow {
 		@apply relative transition-transform duration-500 ease-in-out;