trafficlunar/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: make header links work a bit better

Browse source
This commit is contained in:
trafficlunar 2025-09-17 22:09:40 +01:00
parent 44c2ab26a5
commit b0c4a54cf4
1 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/Header.svelte
View file

@ -20,22 +20,23 @@
<section class="!p-1.5 mb-8 w-fit">
<div class="relative grid grid-cols-3 gap-1.5">
<!-- Animated background for active link -->
<div
class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out"
style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));"
></div>
{#if activeIndex !== -1}
<div
class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out"
style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));"
></div>
{/if}
{#each links as item}
<!-- Div here to hide the hover background behind the animated background -->
<div class="flex rounded-sm hover:bg-surface0">
<a
href={item.url}
class="z-10 w-full font-medium text-sm text-center px-4 py-1 rounded-sm transition-colors duration-200 {pathname === item.url &&
'!text-base'}"
>
{item.name}
</a>
</div>
<a
href={item.url}
class="z-10 w-full font-medium text-sm text-center px-4 py-1 rounded-sm transition-colors duration-200 {pathname === item.url
? '!text-base'
: 'hover:bg-surface0'}"
>
{item.name}
</a>
{/each}
</div>
</section>