granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix nav highlight for profile sub-routes

Browse source
This commit is contained in:
Justin Edmund 2025-12-13 20:02:14 -08:00
parent 82c3f3c471
commit 492307530a
1 changed files with 13 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/lib/components/Navigation.svelte
View file

@ -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>