Spaces:
Running
Running
File size: 2,825 Bytes
336b102 c85bc2e 336b102 c85bc2e 336b102 c85bc2e 336b102 c85bc2e 336b102 c85bc2e 336b102 c85bc2e d541ad4 336b102 d541ad4 336b102 d541ad4 336b102 d541ad4 336b102 c85bc2e 336b102 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <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>
|