src/lib/components/Navigation.svelte

<script lang="ts">
	import { resolve } from '$app/paths';
	import { page } from '$app/state';
	import type { PathnameWithSearchOrHash } from '$app/types';
	import Logo from '$lib/components/logo/logo.svelte';
	import * as NavigationMenu from '$lib/components/ui/navigation-menu/index.js';
	import { navigationMenuTriggerStyle } from '$lib/components/ui/navigation-menu/navigation-menu-trigger.svelte';
	import { m } from '$lib/paraglide/messages.js';
	import { deLocalizeHref, localizeHref } from '$lib/paraglide/runtime';
	import { cn } from '$lib/utils.js';

	const navItems = [
		{ label: m.navigation_ranking, href: '/' },
		{ label: m.navigation_details, href: '/details' },
		{ label: m.navigation_visualizations, href: '/tools' },
		{ label: m.navigation_methodology, href: '/methodology' }
	] as const;

	const navLinkTransitionClass = 'transition-[background-color,box-shadow,opacity]';
	const activeNavLinkClass =
		'bg-[linear-gradient(135deg,#0019ff_0%,#3a55ff_45%,#6b4bf5_100%)] text-white shadow-sm shadow-[#0019ff]/20 hover:text-white hover:opacity-95 focus:text-white';
	const inactiveNavLinkClass = 'text-muted-foreground hover:text-foreground focus:text-foreground';

	const currentPath = $derived(deLocalizeHref(page.url.pathname));

	const isActive = (href: string) => {
		if (href === '/') return currentPath === '/';

		return currentPath.startsWith(href);
	};
</script>

<a
	href={resolve(localizeHref('/') as PathnameWithSearchOrHash)}
	class="flex min-w-0 shrink-0 items-center gap-2 rounded-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none sm:gap-3"
	aria-label={m.brand_home_aria_label()}
>
	<span class="font-mono text-base leading-none font-bold text-foreground sm:text-lg">
		{m.brand_guard_leaderboard()}
	</span>
	<span
		class="-mt-0.5 flex w-20 items-center border-l pl-2 sm:w-24 sm:pl-3 [&_svg]:h-auto [&_svg]:w-full"
	>
		<Logo />
	</span>
</a>

<NavigationMenu.Root
	class="order-2 flex w-full max-w-none basis-full justify-start lg:order-0 lg:ml-2 lg:w-auto lg:flex-1 lg:basis-lg"
	viewport={false}
>
	<NavigationMenu.List class="w-full flex-wrap justify-start gap-1">
		{#each navItems as item (item.href)}
			<NavigationMenu.Item>
				<NavigationMenu.Link active={isActive(item.href)}>
					{#snippet child()}
						<a
							href={resolve(localizeHref(item.href) as PathnameWithSearchOrHash)}
							aria-current={isActive(item.href) ? 'page' : undefined}
							class={cn(
								navigationMenuTriggerStyle(),
								navLinkTransitionClass,
								isActive(item.href) ? activeNavLinkClass : inactiveNavLinkClass
							)}
						>
							{item.label()}
						</a>
					{/snippet}
				</NavigationMenu.Link>
			</NavigationMenu.Item>
		{/each}
	</NavigationMenu.List>
</NavigationMenu.Root>