From 492307530aa78d8f2e9ecd4c07cdaa3dbf426770 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 13 Dec 2025 20:02:14 -0800
Subject: [PATCH] fix nav highlight for profile sub-routes

---
 src/lib/components/Navigation.svelte | 37 ++++++++++------------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index 06fb6965..9f612cd5 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -45,9 +45,6 @@
 	// Localized links
 	const galleryHref = $derived(localizeHref('/teams/explore'))
 	const guidesHref = $derived(localizeHref('/guides'))
-	const collectionHref = $derived(
-		username ? localizeHref(`/${username}/collection/characters`) : localizeHref('/collection')
-	)
 	const meHref = $derived(localizeHref('/me'))
 	const loginHref = $derived(localizeHref('/auth/login'))
 	const registerHref = $derived(localizeHref('/auth/register'))
@@ -110,11 +107,6 @@
 			return path === href
 		}
 
-		// For collection, check if we're on any collection page
-		if (href === collectionHref) {
-			return path.includes('/collection')
-		}
-
 		// Exact match or starts with href + /
 		return path === href || path.startsWith(href + '/')
 	}
@@ -124,9 +116,13 @@
 		return $page.url.pathname === href || $page.url.pathname.startsWith(href + '/')
 	}
 
-	// Check if the user profile link is selected
+	// Check if the user profile link is selected (includes sub-routes like /favorites, /collection)
+	const userProfilePath = $derived(localizeHref(`/${username}`))
 	const isProfileSelected = $derived(
-		isAuth && ($page.url.pathname === meHref || $page.url.pathname === localizeHref(`/${username}`))
+		isAuth &&
+			($page.url.pathname === meHref ||
+				$page.url.pathname === userProfilePath ||
+				$page.url.pathname.startsWith(userProfilePath + '/'))
 	)
 
 	// Settings modal state
@@ -225,12 +221,10 @@
 				<a href={galleryHref} class:selected={isNavSelected(galleryHref)}>{m.nav_gallery()}</a>
 			</li>
 			{#if isAuth}
-				<!-- Authenticated: show Guides and Collection in nav -->
+				<!-- Authenticated: show Guides and Crew in nav -->
 				<li><a href={guidesHref} class:selected={isNavSelected(guidesHref)}>Guides</a></li>
 				<li>
-					<a href={collectionHref} class:selected={isNavSelected(collectionHref)}
-						>{m.nav_collection()}</a
-					>
+					<a href={crewHref} class:selected={isNavSelected(crewHref)}>Crew</a>
 				</li>
 				<li>
 					<a
@@ -280,19 +274,19 @@
 					<DropdownMenu.Portal>
 						<DropdownMenu.Content class="dropdown-content" sideOffset={5}>
 							{#if !isAuth}
-								<!-- Not authenticated: show Guides and Collection in dropdown -->
+								<!-- Not authenticated: show Guides in dropdown -->
 								<DropdownItem>
 									<a href={guidesHref}>Guides</a>
 								</DropdownItem>
+								<DropdownMenu.Separator class="dropdown-separator" />
+							{/if}
+							{#if role !== null && role >= 7}
 								<DropdownItem>
-									<a href={collectionHref}>{m.nav_collection()}</a>
+									<a href={databaseHref}>Database</a>
 								</DropdownItem>
 								<DropdownMenu.Separator class="dropdown-separator" />
 							{/if}
 							{#if isAuth}
-								<DropdownItem>
-									<a href={crewHref}>Crew</a>
-								</DropdownItem>
 								<DropdownItem>
 									<button class="dropdown-button-with-badge" onclick={() => (invitationsModalOpen = true)}>
 										<span>Invitations</span>
@@ -307,11 +301,6 @@
 									{m.nav_settings()}
 								</button>
 							</DropdownItem>
-							{#if role !== null && role >= 7}
-								<DropdownItem>
-									<a href={databaseHref}>Database</a>
-								</DropdownItem>
-							{/if}
 							{#if isAuth}
 								<DropdownMenu.Separator class="dropdown-separator" />
 								<DropdownItem>