Merge pull request #1199 from syntaxfm/issue-1196

active nav items
syntaxfm · Oct 19, 2023 · 1dbede2 · 1dbede2 · vercel · Oct 19, 2023
2 parents ae3f5f4 + a48735c
commit 1dbede2
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/routes/(site)/Header.svelte b/src/routes/(site)/Header.svelte
@@ -17,9 +17,11 @@
 		</div>
 
 		<nav class="desktop_nav content">
-			<a href="/shows">Shows</a>
-			<a href="/about">About</a>
-			<a href="/potluck">Potluck Qs</a>
+			<a class={$page.url.pathname.startsWith('/shows') ? 'active' : ''} href="/shows">Shows</a>
+			<a class={$page.url.pathname.startsWith('/about') ? 'active' : ''} href="/about">About</a>
+			<a class={$page.url.pathname.startsWith('/potluck') ? 'active' : ''} href="/potluck"
+				>Potluck Qs</a
+			>
 			<!-- <a rel="noopener" target="_blank" href="https://swag.sentry.io">Swag</a> -->
 			<Search />
 			<MobileNav />
@@ -91,6 +93,10 @@
 				background: var(--primary);
 				color: var(--bg);
 			}
+			&.active {
+				background-color: var(--primary);
+				color: var(--bg);
+			}
 			@media (--above_med) {
 				display: block;
 			}