From 2e09de54ac77f0bdf75bdfcdc69126acde90f578 Mon Sep 17 00:00:00 2001
From: "Amir H. Hashemi" <87268103+amirhhashemi@users.noreply.github.com>
Date: Thu, 3 Jul 2025 19:06:41 +0330
Subject: [PATCH] Fix navbar link style on sub-routes

---
 src/ui/layout/main-header.tsx | 59 ++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/ui/layout/main-header.tsx b/src/ui/layout/main-header.tsx
index 08b3281b72..dbdebd5f18 100644
--- a/src/ui/layout/main-header.tsx
+++ b/src/ui/layout/main-header.tsx
@@ -1,5 +1,5 @@
 import { Show, createMemo, createSignal, onCleanup, onMount } from "solid-js";
-import { A } from "~/ui/i18n-anchor";
+import { A, type RouterLinkProps } from "~/ui/i18n-anchor";
 import { isServer } from "solid-js/web";
 
 import { Logo, GitHubIcon, DiscordIcon } from "~/ui/logo";
@@ -17,6 +17,26 @@ const ClientSearch = clientOnly(() =>
 	import("../search").then((m) => ({ default: m.Search }))
 );
 
+interface NavLinkProps extends RouterLinkProps {
+	active?: boolean;
+}
+
+function NavLink(props: NavLinkProps) {
+	return (
+		<A
+			class="border-b-2 text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2 transition-all duration-250"
+			classList={{
+				"border-b-blue-500 dark:bottom-b-blue-500": props.active,
+				"border-transparent": !props.active,
+			}}
+			addLocale
+			{...props}
+		>
+			{props.children}
+		</A>
+	);
+}
+
 interface Entry {
 	title: string;
 	path: string;
@@ -93,47 +113,30 @@ export function MainHeader(props: NavProps) {
 
 				<ul class="order-2 col-span-2 lg:col-span-1 flex pt-6 lg:pt-0 lg:w-auto w-full gap-5 justify-center">
 					<li>
-						<A
+						<NavLink
 							href="/"
-							class="text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
-							classList={{
-								"border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
-									project() === "solid" && !translatedLocale(),
-							}}
-							addLocale
+							active={project() === "solid" && !translatedLocale()}
 						>
 							Core
-						</A>
+						</NavLink>
 					</li>
 					<li>
-						<A
+						<NavLink
 							href="/solid-router/"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
-							addLocale
+							active={project() === "solid-router"}
 						>
 							Router
-						</A>
+						</NavLink>
 					</li>
 					<li>
-						<A
-							href="/solid-start/"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
-							addLocale
-						>
+						<NavLink href="/solid-start/" active={project() === "solid-start"}>
 							SolidStart
-						</A>
+						</NavLink>
 					</li>
 					<li>
-						<A
-							href="/solid-meta/"
-							class="text-slate-900 dark:text-slate-200 px-2"
-							activeClass="border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250"
-							addLocale
-						>
+						<NavLink href="/solid-meta/" active={project() === "solid-meta"}>
 							Meta
-						</A>
+						</NavLink>
 					</li>
 				</ul>