43 lines
777 B
Svelte
43 lines
777 B
Svelte
|
<script>
|
||
|
|
export let segment;
|
||
|
|
export let humanName;
|
||
|
|
export let href;
|
||
|
|
export let matchingSegment;
|
||
|
|
|
||
|
|
import { page } from '$app/stores';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="navItem"
|
||
|
|
aria-current={$page.url.pathname === matchingSegment ? "page" : undefined}
|
||
|
|
>
|
||
|
|
<div class="width-placeholder">{humanName}</div>
|
||
|
|
<a rel="prefetch" {href}>{humanName == "home" ? "" : humanName}<slot /></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.navItem {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
padding-left: 0.5em;
|
||
|
|
padding-right: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.width-placeholder{
|
||
|
|
height: 0;
|
||
|
|
font-weight: bold;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navItem[aria-current] {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|