46 lines
833 B
Text
46 lines
833 B
Text
|
---
|
||
|
|
let { path } = Astro.props;
|
||
|
|
if (path.startsWith('/')) path = path.slice(1);
|
||
|
|
|
||
|
|
const activePath = Astro.url.pathname.slice(1);
|
||
|
|
|
||
|
|
const active = activePath === path;
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<a href={'/' + path} class={active ? 'active' : 'inactive'}>
|
||
|
|
<slot />
|
||
|
|
<sup class="badge"
|
||
|
|
hx-trigger={active ? 'load, questComplete from:body' : 'load'}
|
||
|
|
hx-get={`/page/incomplete_count?route=${path}`}
|
||
|
|
hx-target="this"
|
||
|
|
hx-swap="innerText"
|
||
|
|
>
|
||
|
|
?
|
||
|
|
</sup>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tab {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: black;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab:has(a.active) {
|
||
|
|
border-bottom: 2px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: small;
|
||
|
|
margin-left: -0.5em;
|
||
|
|
}
|
||
|
|
</style>
|