CameraView/docs/_includes/navigation.html

<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>