97 lines
1.7 KiB
Text
97 lines
1.7 KiB
Text
---
|
|
const pathname = Astro.url.pathname;
|
|
|
|
const links = [
|
|
{
|
|
href: "/photos",
|
|
label: "Stream",
|
|
active: pathname === "/photos" || pathname === "/photos/",
|
|
},
|
|
{
|
|
href: "/photos/collections",
|
|
label: "Collections",
|
|
active: pathname.startsWith("/photos/collections"),
|
|
},
|
|
{
|
|
href: "/photos/tags",
|
|
label: "Tags",
|
|
active: pathname.startsWith("/photos/tags"),
|
|
},
|
|
{
|
|
href: "/photos/map",
|
|
label: "Map",
|
|
active: pathname.startsWith("/photos/map"),
|
|
},
|
|
{
|
|
href: "/photos/stats",
|
|
label: "Stats",
|
|
active: pathname.startsWith("/photos/stats"),
|
|
},
|
|
];
|
|
---
|
|
|
|
<div class="photos-nav-wrapper">
|
|
<div class="photos-header">
|
|
<a href="/" class="back-link">← Back home</a>
|
|
<h1 class="photos-title">Photos</h1>
|
|
</div>
|
|
|
|
<nav class="sub-nav" aria-label="Photos navigation">
|
|
{
|
|
links.map(({ href, label, active }) => (
|
|
<a href={href} class={`sub-nav__link${active ? " is-active" : ""}`}>
|
|
{label}
|
|
</a>
|
|
))
|
|
}
|
|
</nav>
|
|
</div>
|
|
|
|
<style>
|
|
.photos-header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.back-link {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: #666;
|
|
text-decoration: none;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #f5f5f3;
|
|
}
|
|
|
|
.photos-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #f5f5f3;
|
|
margin: 0.25rem 0 0;
|
|
}
|
|
|
|
.sub-nav {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.sub-nav__link {
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: #666;
|
|
text-decoration: none;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sub-nav__link:hover {
|
|
color: #f5f5f3;
|
|
}
|
|
|
|
.sub-nav__link.is-active {
|
|
color: #f5f5f3;
|
|
}
|
|
</style>
|