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"> <section class="!p-1.5 mb-8 w-fit">
<div class="relative grid grid-cols-3 gap-1.5"> <div class="relative grid grid-cols-3 gap-1.5">
<!-- Animated background for active link --> <!-- Animated background for active link -->
<div {#if activeIndex !== -1}
class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out" <div
style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));" class="absolute inset-0 bg-peach rounded w-[calc((100%/3)-0.25rem)] transition-transform duration-300 ease-out"
></div> style="transform: translateX(calc({activeIndex * 100}% + {activeIndex * 0.375}rem));"
></div>
{/if}
{#each links as item} {#each links as item}
<!-- Div here to hide the hover background behind the animated background --> <!-- Div here to hide the hover background behind the animated background -->
<div class="flex rounded-sm hover:bg-surface0"> <a
<a href={item.url}
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
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'
'!text-base'}" : 'hover:bg-surface0'}"
> >
{item.name} {item.name}
</a> </a>
</div>
{/each} {/each}
</div> </div>
</section> </section>