Indicators for sections in file tree menu

[undergroundwires]

I believe it's a big UX improvement that increases the usability as one could easily get a quick picture of the depth of the content.

It'd be achieved with three states: section (1), page (2) and a collapsed section (3). Here's an example from haxe

Or even more minimal example from Microsoft Docs:

It surely wouldn't look as clean as it is now but it's a trade-off I'd make for the reading experience.

You think it should be an optional feature of hugo-book? Or how would you recommend extending the theme to achieve that?

[alex-shpak]

Hi again!
I had some thought about icon when I was working on collapsable menu. And at that time I decided to keep it as it is for theme slogan: "As simple as plain book"

I feel like icons on left might be an overkill, but indicator that section can be expanded might be good. Maybe a dot or triangle on right side of menu 🤔

[alex-shpak]

Like that perhaps

[undergroundwires]

@alex-shpak thanks for maintaining and supporting this and considering having this feature natively in the theme.

I loved the simplicity of the theme and I believe many do and that's why are here :) Picture you've shown is the most simplistic implementation that looks perfectly clear without any bloat.

I'd love to see ➡️ (state 3) when a section is collapsed (bookCollapseSection: true) but has more than single page content in it. It enhances the reading experience with more information about the content at the first sight.

⬇️ (state 1) is nice to have as indenting already makes it clear that the menu items are under that section, however it'd probably go along pretty good with ➡️ cosmetically.

[alex-shpak]

I added state 3 indicator on collapsed sections. It hard to track parent section to change icon because menu is generated statically, so no state 1. But I think its okay enough. 🤷‍♂

[undergroundwires]

I also think it's OK enough 👍🏿 Really huge thanks for it! I loved how clean the commit is 😲, I've been expecting much more lines :)

I just tested it and it showed the bullet on every single menu item in file-tree 😞, but then I realized that I have been brute-forcing bookCollapseSection on every single page. I now only set it on pages that includes pages and it looks pretty neat 👌

Thanks again and very cool that you decided to have it natively 💗

Closing the issue now.

[undergroundwires]

Hi @alex-shpak ,

I know that now it's about different tastes, but when I compared on the right vs on the left I personally thought it looks better on the left as they are aligned. It gives a little bit chaotic look when they're not symmetrical. It may vary from person to person but I'd prefer to have them on the left. I did it now with some css override. You decide what to keep as default.

Here's a picture of the site I'm building for comparison:

[alex-shpak]

Yeah, it might need tweaking. It kinda depends on how many collapsed items you have, in your case there are a lot so it looks better on left. Maybe on right image icons should be aligned and pushed to right edge.
Or they should be outside of menu block to not break text alignment
This is what I want to avoid

Menu item 1
▸  Menu Item 2
Menu item 3

So maybe it should be like

   Menu item 1
▸  Menu Item 2
   Menu item 3

[alex-shpak]

I just tested it and it showed the bullet on every single menu item in file-tree 😞

I pushed change to skip collapsed icon for leaf pages (even if bookCollapseSection is set for regular page) to address that.

[undergroundwires]

I pushed change to skip collapsed icon for leaf pages (even if bookCollapseSection is set for regular page) to address that.

Cool!

💡 Sass docs uses the bullet on right and aligns them as well. I think it's also a good option: https://sass-lang.com/documentation/syntax

So maybe it should be like: (good alignment)

I put pulled left each bulleted item, and then moved menu to the right with same margin to achieve it:

⚠️ I'm a shit CSS-writer. Codes below are probably ugly hacks.

.book-menu {
    $arrow-margin: 1rem;
    // Mark with "▸"
    a {
        &.collapsed {
            &::before {
                content: "▸";
                margin-left: -$arrow-margin;
                margin-right:0.3rem;
            }
            // Override the default
            &::after { content: ""; margin-left: 0; }
        }
    }
    // Fix alignment
    ul {
        margin-left:  $arrow-margin;
        ul {
            margin-left:0; // Only affect parrent
        }
}

I also played with some SCSS to be able to write a query like: If I'm a menu item with "active" class on, find all UL's above me, then for each parent UL, check its first child with ".collapsed" class and then overwrite "▸" with "▾". I wasn't succesful enough to achieve state 1 with only css but I got it working with JS + CSS:

    .open-section {
        &::before {
            content: "▾" !important;
        }
    }

    window.onload = markOpenSections;
    function markOpenSections() {
        const styleName = 'open-section';
        const activeElement = document.getElementsByClassName('active','collapsed')[0];
        styleParents(activeElement);

        function styleParents(element) {
            const isOpen = element.classList.contains('collapsed');
            if(isOpen) {
                element.classList.add(styleName);
            }
            const closestList = element.closest('ul');
            if(!closestList) {
                return;
            }
            const nextMenu = closestList.parentElement;
            if(!nextMenu) {
                return;
            }
            const nextItem = nextMenu.children[0];
            if(!nextItem) {
                return;
            }
            styleParents(nextItem);
        }
    };