55 lines
897 B
Plaintext
55 lines
897 B
Plaintext
---
|
|
import Avatar from './Avatar.astro';
|
|
const { pathname } = Astro.url;
|
|
|
|
interface Props {}
|
|
|
|
interface NavLink {
|
|
label: string;
|
|
|
|
path: string;
|
|
}
|
|
|
|
const navLinks: NavLink[] = [
|
|
{ label: 'Blog', path: 'blog' },
|
|
{ label: 'Now', path: 'now' },
|
|
{ label: 'Projects', path: 'projects' },
|
|
];
|
|
|
|
const pathComponents = pathname.split('/').slice(1);
|
|
---
|
|
|
|
<header>
|
|
<div>
|
|
{
|
|
pathComponents[0] !== '' ? (
|
|
<a href="/" transition:name="my-avatar">
|
|
<Avatar size={60} />
|
|
</a>
|
|
) : null
|
|
}
|
|
</div>
|
|
<nav>
|
|
{
|
|
navLinks.map((link) => (
|
|
<li>
|
|
<a href={`/${link.path}`}>
|
|
<span>{link.label}</span>
|
|
</a>
|
|
{pathComponents[0] === link.path ? (
|
|
<div class="underline" transition:name="menu-selection-indicator" />
|
|
) : null}
|
|
</li>
|
|
))
|
|
}
|
|
</nav>
|
|
</header>
|
|
|
|
<style>
|
|
.underline {
|
|
height: 2px;
|
|
width: 100%;
|
|
background-color: var(--orange);
|
|
}
|
|
</style>
|