Create a dynamic category list

[phenomlab]

@DownPW has just pointed out a valid issue here. If you have lots of categories, then the list can easily extend the browser window, and if you resize the browser, you won’t be able to access it properly. For this to work, you’d need to apply custom CSS to that - for example, the below, but it should only be applied at a minimum of 1200px so will need to use a media class.

    li#thecategories {
        min-width: 250px;
        font-size: 90%;
        overflow: auto;
        height: calc(100vh - 110px);
    }

This specific CSS calculates the height of the browser window, then removes some of it to allow for the bottom bar in desktop view (note that you might not be using this, so you’ll need to adjust the calc value as you see fit).

[phenomlab]

I’ll revise the original post to reflect this

[phenomlab]

I’ve been playing around with this today, and created a “tree” view

[phenomlab]

If you’d like the code for this, then it’s below (it’s essentially a “fork” of the original to allow for extra classes)

JS

$(document).ready(function() {
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            var categorylist = $(" \
	<li class='dropdown-item tree-root'><span class='category-menu'><i class='fal " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
		<ul class='tree-branch' style='list-style: none;'>" +
                this.children.map(c => `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='fal ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`).join(" ") +
                "</ul>"
            );
            if ($(window).width() < 767) {
                $(".bottombar #thecategories").append(categorylist);
            } else {
                $(".sidebar-left #thecategories").append(categorylist);
            }
        });
    });
});

CSS

ul.tree-branch {
    border-left: 1px solid var(--bs-border-color);
    margin-left: 22px;
}
li.tree-node:before {
    border-bottom: 1px solid var(--bs-border-color);
    position: relative;
    top: -0.3em;
    height: 1em;
    width: 30px;
    content: "";
    display: inline-block;
    left: -48px;
}
span.category-menu-tree-node {
    margin-left: -35px;
}

NOTE: I use variables for all of my CSS, so you’ll need to substitute var with your own HEX values. Also note, that you still need the original CSS from the first post for this to work - what is listed above only provides you with the tree, branches, and nodes effect.

[crazycells]

This looks so cool, thanks @phenomlab @DownPW

[crazycells]

@phenomlab is there something wrong with the category list panel?

edit: it is fixed now. When I minimize the screen size on my computer and then expand it again, the panel goes blank. But it is fixed when I refresh the page, I guess this is something expected.

[phenomlab]

@crazycells No, not at all. I can’t reproduce this, but that does sound like a hardware acceleration issue. What happens if you disable that (I’m assuming Chrome here if of course, but the same applies for other browsers)

https://pureinfotech.com/disable-hardware-acceleration-chrome/

[crazycells]

@phenomlab sorry, my mistake, it is fixed now.
I am using Firefox, but this morning I needed to restart to update Firefox, so I believe I was having the problem yesterday night because of the outdated browser.

[phenomlab]

@crazycells Good. Glad to hear it’s an even simpler fix

[phenomlab]

Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.

If this is the case, replace the function with this

$(document).ready(function() {
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized
            
            // Check if the icon is FontAwesome Unicode
            if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) {
                iconClass = 'fa';
            } else if (this.icon.startsWith('fab')) {
                iconClass = 'fab';
            }
            
            var categorylist = $(" \
    <li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
        <ul class='tree-branch' style='list-style: none;'>" +
                this.children.map(c => {
                    var childIconClass = 'fa'; // Default to 'fa' for child icons
                    
                    // Check if the child icon is FontAwesome Unicode
                    if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) {
                        childIconClass = 'fas';
                    } else if (c.icon.startsWith('fab')) {
                        childIconClass = 'fab';
                    }
                    
                    return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`;
                }).join(" ") +
                "</ul>"
            );
            
            if ($(window).width() < 767) {
                $(".bottombar #thecategories").append(categorylist);
            } else {
                $(".sidebar-left #thecategories").append(categorylist);
            }
        });
    });
});

In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now

[phenomlab]

I never really liked the way this was generated, as it didn’t exactly match the other dropdowns. I’ve since rectified that here, and will now update GIT.

Revised navigation code

<li class='nav-item' title=''>                 
    <a class='nav-link nav-btn navigation-link px-3 py-2' href='/categories'>                     
        <span class='d-inline-flex justify-content-between align-items-center w-100'>                         
            <span class='text-nowrap'>                             
                <i class='fa-regular fa-list fa-solid menu-icon' data-content='' aria-hidden='true'>               </i>                             
                <span class='nav-text px-2 fw-semibold'>All Categories</span>                         
            </span>                         
            <span component='navigation/count' class='badge rounded-1 bg-primary hidden'></span>                     
        </span>                 
    </a>                 
    <ul class='tree-branch' style='list-style: none;'></ul>            
 </li>
 <li id='thecategories'><h6 class='dropdown-header text-xs'>Individual Categories</h6></li>

Revised category list code

$(document).ready(function() {
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            var iconClass = 'fa-regular'; // Default to 'fa-regular' if the icon type is not recognized
            
            // Check if the icon is FontAwesome Unicode
            if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) {
                iconClass = 'fa-regular';
            } else if (this.icon.startsWith('fab')) {
                iconClass = 'fab';
            }
            
            var categorylist = $("<li class='nav-item' title=''> \
                <a class='nav-link nav-btn navigation-link px-3 py-2' href='/category/" + this.slug + "'> \
                    <span class='d-inline-flex justify-content-between align-items-center w-100'> \
                        <span class='text-nowrap'> \
                            <i class='" + iconClass + " " + this.icon + " menu-icon' data-content='' aria-hidden='true'></i> \
                            <span class='nav-text px-2 fw-semibold'>" + this.name + "</span> \
                        </span> \
                        <span component='navigation/count' class='badge rounded-1 bg-primary hidden'></span> \
                    </span> \
                </a> \
                <ul class='tree-branch' style='list-style: none;'>" + 
                this.children.map(c => {
                    var childIconClass = 'fa-regular'; // Default to 'fa-regular' for child icons
                    
                    // Check if the child icon is FontAwesome Unicode
                    if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) {
                        childIconClass = 'fa-regular';
                    } else if (c.icon.startsWith('fab')) {
                        childIconClass = 'fab';
                    }
                    
                    return `<li class='nav-item tree-node' title=''><a class='nav-link nav-btn navigation-link px-3 py-2' href='/category/${c.slug}'><span class='d-inline-flex justify-content-between align-items-center w-100'><span class='text-nowrap'><i class='${childIconClass} ${c.icon} menu-icon' data-content='' aria-hidden='true'></i><span class='nav-text px-2 fw-semibold'>${c.name}</span></span><span component='navigation/count' class='badge rounded-1 bg-primary hidden'></span></span></a></li>`;
                }).join(" ") + 
                "</ul> \
            </li>");
            
            if ($(window).width() < 767) {
                $(".bottombar #thecategories").append(categorylist);
            } else {
                $(".sidebar-left #thecategories").append(categorylist);
            }
        });
    });
});

Minor CSS changes (only the styles listed below)

ul.tree-branch {
    border-left: 1px solid var(--bs-link-color);
    margin-left: 22px;
}

li.tree-node:before {
    border-bottom: 1px solid var(--bs-link-color);
    position: relative;
    top: 1.4em;
    width: 35px;
    content: "";
    display: flex;
    left: -33px;
}

[phenomlab]

Hmm - seems I never committed this code. I’ll do that now…

EDIT - here it is

https://github.com/phenomlab/category-list/tree/main