sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

♻️ Refactored index & header

Browse source 
Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
Sid 2025-05-29 19:29:38 +02:00
parent 192801348f
commit 459ddffa6b
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
5 changed files with 70 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/Header.astro
View file

@ -1,27 +1,31 @@
---
const pathname = new URL(Astro.request.url).pathname;
const pathSegments = pathname.slice(1).split('/').filter(segment => segment !== '');
function buildHref(index) {
if (pathSegments.length === 0) return '/';
return ' /' + pathSegments.slice(0, index + 1).join('/');
}
const isLandingPage = pathSegments.length === 0;
const { pathname } = Astro.url;
---
<header class="flex justify-between items-center py-5">
<div>
<a class="text-l font-semibold" href="/">~</a>
{isLandingPage ? <span> / </span> : ''}
{pathSegments.map((segment, index) => (
<>
<span> / </span>
<a class="text-l font-semibold italic" href={buildHref(index)}>
{segment}
</a>
</>
))}
<header class="flex flex-col gap-6 py-5">
<div class="flex items-end gap-4">
<img class="profile" />
<h1 class="text-3xl font-extrabold">Sids' blog</h1>
</div>
<nav class="flex flex-wrap gap-2">
<a class={`headerlink ${pathname === '/' ? 'headerlink-active' : ''}`} href="/">home</a>
<a class={`headerlink ${pathname === '/blog' ? 'headerlink-active' : ''}`} href="/blog">blog</a>
<a class={`headerlink ${pathname === '/logs' ? 'headerlink-active' : ''}`} href="/logs">logs</a>
<a class={`headerlink ${pathname === '/gallery' ? 'headerlink-active' : ''}`} href="/gallery">gallery</a>
<a class={`headerlink ${pathname === '/guestbook' ? 'headerlink-active' : ''}`} href="/guestbook">guestbook</a>
<a class={`headerlink ${pathname === '/slashes' ? 'headerlink-active' : ''}`} href="/slashes">more</a>
</nav>
</header>
<style>
.profile {
width: 6vh;
height: 6vh;
background: url("/mii.webp");
background-size: cover;
border-radius: 5px;
}
.profile:hover {
background-image: url("/rick-roll-rick-ashley.gif");
}
</style>