You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.5 KiB
74 lines
1.5 KiB
5 months ago
|
<script lang="ts">
|
||
|
|
import { page } from '$app/state';
|
||
|
|
import { findNavIndex, flatNav } from '../_data/nav';
|
||
|
|
|
||
|
|
const idx = $derived(findNavIndex(page.url.pathname.replace(/\/$/, '')));
|
||
|
|
const prev = $derived(idx > 0 ? flatNav[idx - 1] : undefined);
|
||
|
|
const next = $derived(idx >= 0 && idx < flatNav.length - 1 ? flatNav[idx + 1] : undefined);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if prev || next}
|
||
|
|
<nav class="page-nav" aria-label="Page navigation">
|
||
|
|
{#if prev}
|
||
|
|
<a class="link" href={prev.href}>
|
||
|
|
<span class="dir">← Previous</span>
|
||
|
|
<span class="label">{prev.label}</span>
|
||
|
|
</a>
|
||
|
|
{:else}
|
||
|
|
<span></span>
|
||
|
|
{/if}
|
||
|
|
{#if next}
|
||
|
|
<a class="link right" href={next.href}>
|
||
|
|
<span class="dir">Next →</span>
|
||
|
|
<span class="label">{next.label}</span>
|
||
|
|
</a>
|
||
|
|
{/if}
|
||
|
|
</nav>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.page-nav {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
gap: 1rem;
|
||
|
|
margin: 4rem 0 1rem;
|
||
|
|
padding-top: 2rem;
|
||
|
|
border-top: 1px solid var(--c-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 0.25rem;
|
||
|
|
padding: 0.85rem 1rem;
|
||
|
|
border: 1px solid var(--c-border);
|
||
|
|
border-radius: var(--r-lg);
|
||
|
|
color: var(--c-fg);
|
||
|
|
transition:
|
||
|
|
border-color 120ms var(--ease),
|
||
|
|
background-color 120ms var(--ease);
|
||
|
|
}
|
||
|
|
|
||
|
|
.link:hover {
|
||
|
|
border-color: var(--c-accent);
|
||
|
|
background: var(--c-accent-muted);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.link.right {
|
||
|
|
text-align: right;
|
||
|
|
align-items: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dir {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: var(--c-fg-subtle);
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--c-link);
|
||
|
|
}
|
||
|
|
</style>
|