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.
CameraView/docs/_includes/navigation.html

42 lines
1.4 KiB

<ul id="navigation" class="py-4">
<li><a href="{{ site.baseurl }}/home">Home</a></li>
{% for section in site.sections %}
{% assign attr = section[0] %}
{% assign label = section[1] %}
<li class="mt-3"><h5 class="mt-0 mb-1">{{ label }}</h5>
<ul>
{% for page in site.categories[attr] %}
<li class="pt-2 pb-2" data-order="{{ page.order }}">
<a href="{{ site.baseurl }}{{ page.url }}">{{ page.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
<script>
/* find current item and make it active */
const current = document.location.href;
const links = document.querySelectorAll('#navigation a');
links.forEach((link) => {
if (current && link && current.endsWith(link.getAttribute('href'))) {
link.parentElement.classList.add('active')
}
});
/* reorder elements */
const sections = document.querySelectorAll('#navigation ul');
sections.forEach((section) => {
const entries = section.querySelectorAll('li');
const ordered = [];
entries.forEach((entry) => {
const order = entry.getAttribute('data-order');
ordered.push([entry, order]);
});
ordered.sort((a, b) => a[1] - b[1]);
ordered.forEach((entry) => {
section.appendChild(entry[0]);
})
});
</script>