Is there a way to have nav links auto collapsed on page load?

[divSelector]

I'd like for categories to be collapsed by default. Preferably I would be able to specify which tree of links to auto collapse and which to not.

[alexvoss]

This should be doable with customization. A bit of extra JS could simply click on the "categories" element to open it.

[divSelector]

I decided to do just that...

document.addEventListener('DOMContentLoaded', function() {
    const itemsToClick = ['categories'];

    for (const item of itemsToClick) {
        const elem = [...document.querySelectorAll('nav > ul > li > label')]
            .find(label => label.children[0].textContent.trim() === item);

        if (elem) {
            elem.click();
        }
    }
});

[divSelector]

Unfortunately this approach is pretty disorienting in the mobile view which makes it not worth using this imo.

The preferable way to do this for me would be to just not have dropdown menus at all in desktop view. Of course, that's another question...

[alexvoss]

Can you not ensure that this runs only on a desktop?

[divSelector]

I suppose I can

document.addEventListener('DOMContentLoaded', function() {
    const desktopViewportBreakpoint = 1219
    if (window.innerWidth >= desktopViewportBreakpoint) {
        const itemsToClick = ['categories'];

        for (const item of itemsToClick) {
            const elem = [...document.querySelectorAll('nav > ul > li > label')]
                .find(label => label.children[0].textContent.trim() === item);

            if (elem) {
                elem.click();
            }
        }
    }
});

It still feels like a hack to achieve what I want, which is to just have the links visible outside of a collapsed menu entirely. But because they are links generated by the blog plugin Im not sure how to go about that.

In any case, the above code does work and I'll use it until I find a config I like better.

[alexvoss]

FWIW, I do think it is a sensible aim to have the blog subsections open by default.

[divSelector]

This is probably a bit jank but whatever

document.addEventListener('DOMContentLoaded', function() {
    const desktopViewportBreakpoint = 1219;
    
    const itemsToExpand = ['categories'];

    function expandNavItems(itemsToExpand) {
        const navLabels = [...document.querySelectorAll('nav > ul > li > label')];

        for (const item of itemsToExpand) {
            const label = navLabels.find(l => l.children[0].textContent.trim() === item);
            const expands = label.nextElementSibling;

            if (label && expands && expands.getAttribute('aria-expanded') === 'false') {
                label.click();
            }
        }
    }

    function handleViewportChange() {
        if (window.innerWidth >= desktopViewportBreakpoint) {
            expandNavItems(itemsToExpand);
        }
    }

    handleViewportChange();

    window.addEventListener('resize', handleViewportChange);
});