diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte index f1be2fa6..e1a5eee0 100644 --- a/src/lib/components/Navigation.svelte +++ b/src/lib/components/Navigation.svelte @@ -9,21 +9,31 @@ import Icon from './Icon.svelte' import DropdownItem from './ui/dropdown/DropdownItem.svelte' import { DropdownMenu } from 'bits-ui' + import type { UserCookie } from '$lib/types/UserCookie' + import { getAvatarSrc, getAvatarSrcSet } from '$lib/utils/avatar' // Props from layout data const { - username: usernameProp, - isAuthenticated: isAuthProp, - role: roleProp + account, + currentUser, + isAuthenticated: isAuthProp } = $props<{ - username?: string | null + account?: { + userId: string + username: string + role: number + } | null + currentUser?: UserCookie | null isAuthenticated?: boolean - role?: number | null }>() - const username = $derived(usernameProp ?? '') + const username = $derived(account?.username ?? '') const isAuth = $derived(Boolean(isAuthProp)) - const role = $derived(roleProp ?? null) + const role = $derived(account?.role ?? null) + // Element from UserCookie is already a string like "fire", "water", etc. + const userElement = $derived( + currentUser?.element as 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | undefined + ) // Localized links const galleryHref = $derived(localizeHref('/teams/explore')) @@ -35,6 +45,13 @@ const databaseHref = $derived(localizeHref('/database')) const newTeamHref = $derived(localizeHref('/teams/new')) + // Get the element class for styling + const elementClass = $derived(userElement ? `element-${userElement}` : '') + + // Get the user's avatar URLs + const avatarSrc = $derived(getAvatarSrc(currentUser?.picture)) + const avatarSrcSet = $derived(getAvatarSrcSet(currentUser?.picture)) + // Database-specific links const databaseCharactersHref = $derived(localizeHref('/database/characters')) const databaseWeaponsHref = $derived(localizeHref('/database/weapons')) @@ -43,11 +60,29 @@ // Database route detection const isDatabaseRoute = $derived($page.url.pathname.startsWith(localizeHref('/database'))) + // Function to check if a nav item is selected + function isNavSelected(href: string): boolean { + const path = $page.url.pathname + + // For gallery/teams, we need to check for /teams paths + if (href === galleryHref) { + return path === href || path.startsWith(localizeHref('/teams')) + } + + // Exact match or starts with href + / + return path === href || path.startsWith(href + '/') + } + // Function to check if a database nav item is selected function isDatabaseNavSelected(href: string): boolean { return $page.url.pathname === href || $page.url.pathname.startsWith(href + '/') } + // Check if the user profile link is selected + const isProfileSelected = $derived( + isAuth && ($page.url.pathname === meHref || $page.url.pathname === localizeHref(`/${username}`)) + ) + // Handle logout async function handleLogout() { try { @@ -66,7 +101,7 @@ } -