style(side-panel): highlight and disable active page

Author: WarningImHack3r

src/routes/package/[...package]/SidePanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { ClassValue } from "svelte/elements";
+	import { page } from "$app/state";
 	import { ChevronRight } from "@lucide/svelte";
 	import type { CategorizedPackage } from "$lib/server/package-discoverer";
 	import { cn } from "$lib/utils";
@@ -46,28 +47,39 @@
 							<ul class="space-y-2">
 								{#each packages as { pkg } (pkg.name)}
 									<li>
-										<a
-											href="/package/{pkg.name}"
-											class="group inline-flex w-full items-center underline-offset-4 hover:underline"
-										>
-											{pkg.name}
-											<ChevronRight
-												class="ml-auto size-4 text-primary transition-transform group-hover:translate-x-1"
-											/>
-										</a>
+										{#if page.url.pathname.endsWith(pkg.name)}
+											<span class="font-semibold">{pkg.name}</span>
+										{:else}
+											<a
+												href="/package/{pkg.name}"
+												class="group inline-flex w-full items-center underline-offset-4 hover:underline"
+											>
+												{pkg.name}
+												<ChevronRight
+													class="ml-auto size-4 text-primary transition-transform group-hover:translate-x-1"
+												/>
+											</a>
+										{/if}
 									</li>
 								{/each}
 							</ul>
 						{:else}
-							<a
-								href="/package/{packages[0]?.pkg.name}"
-								class="group inline-flex w-full items-center text-xl font-bold text-primary underline-offset-4 hover:underline"
-							>
-								{category.name}
-								<ChevronRight
-									class="ml-auto size-4 text-primary transition-transform group-hover:translate-x-1"
-								/>
-							</a>
+							{@const firstPackageName = packages[0]?.pkg.name ?? ""}
+							{#if page.url.pathname.endsWith(firstPackageName)}
+								<span class="text-xl font-bold text-primary underline underline-offset-4">
+									{category.name}
+								</span>
+							{:else}
+								<a
+									href="/package/{firstPackageName}"
+									class="group inline-flex w-full items-center text-xl font-bold text-primary underline-offset-4 hover:underline"
+								>
+									{category.name}
+									<ChevronRight
+										class="ml-auto size-4 text-primary transition-transform group-hover:translate-x-1"
+									/>
+								</a>
+							{/if}
 						{/if}
 					</li>
 				{/each}