2021-04-30 13:33:32 -06:00
|
|
|
<script>
|
|
|
|
export let segment;
|
|
|
|
export let humanName;
|
|
|
|
export let href;
|
|
|
|
export let matchingSegment;
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="navItem"
|
|
|
|
aria-current={segment === matchingSegment ? "page" : undefined}
|
|
|
|
>
|
|
|
|
<a rel="prefetch" {href}>{humanName}</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.navItem {
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding-left: 0.5em;
|
|
|
|
padding-right: 0.5em;
|
|
|
|
}
|
2021-04-30 14:16:14 -06:00
|
|
|
|
|
|
|
a {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navItem[aria-current] {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2021-04-30 13:33:32 -06:00
|
|
|
</style>
|