51 lines
1.3 KiB
Plaintext
51 lines
1.3 KiB
Plaintext
---
|
|
import WikiPageEntry from "../types/WikiPageEntry";
|
|
|
|
const { entry } = Astro.props as { entry: WikiPageEntry };
|
|
---
|
|
<li>
|
|
{entry.children.length > 0 && <a class="dropdown-arrow" href="#">▶</a>}<a class={Astro.url.pathname === entry.url ? "active" : ""} href={entry.url}>{entry.title}</a>
|
|
{entry.children.length > 0 && (
|
|
<ul style="display: none;">
|
|
{entry.children.map((child: WikiPageEntry) => <Astro.self entry={child} />)}
|
|
</ul>
|
|
)}
|
|
</li>
|
|
<style>
|
|
a {
|
|
color: green;
|
|
}
|
|
|
|
a:hover {
|
|
color: lime;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.dropdown-arrow {
|
|
color: green;
|
|
margin-right: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.active {
|
|
color: lime;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
<script>
|
|
const dropdownArrows: NodeListOf<HTMLElement> = document.querySelectorAll('.dropdown-arrow');
|
|
|
|
dropdownArrows.forEach((arrow) => {
|
|
arrow.addEventListener('click', (event) => {
|
|
event.preventDefault();
|
|
const ul = (event.target as HTMLElement)?.parentElement?.querySelector('ul');
|
|
if(!ul) return;
|
|
arrow.textContent = ul.style.display === 'none' ? '▼' : '▶';
|
|
arrow.style.color = ul.style.display === 'none' ? 'lime' : 'green';
|
|
ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
|
|
});
|
|
});
|
|
</script> |