68 lines
1.1 KiB
Text
68 lines
1.1 KiB
Text
---
|
|
const { pathname } = Astro.url;
|
|
const currentPath =
|
|
pathname.endsWith("/") && pathname.length > 1
|
|
? pathname.slice(0, -1)
|
|
: pathname;
|
|
const navItems = [
|
|
{ href: "/", label: "About" },
|
|
{ href: "/now", label: "Now" },
|
|
{ href: "/writing", label: "Writing" },
|
|
];
|
|
---
|
|
|
|
<header>
|
|
<h1>dnsc</h1>
|
|
<ul>
|
|
{
|
|
navItems.map(({ href, label }) => (
|
|
<li>
|
|
<a href={href} class={currentPath === href ? "active" : ""}>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</header>
|
|
|
|
<style>
|
|
header {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
flex-wrap: wrap;
|
|
max-width: var(--container-lg);
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--font-fancy);
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style-type: none;
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
|
|
ul > li {
|
|
margin-left: 0.6rem;
|
|
margin-right: 0.6rem;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
a.active {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|