www_mycelium/templates/partials/blogSidebar.html

<div class="mx-8 lg:mx-4 flex flex-col mt-2 pt-6 md:mt-8">
    <div class="flex flex-col mb-12">
        <h4 class="text-base not-italic font-medium leading-6 text- mb-4"> FILTER POSTS BY</h4>
        <a id="all" class="mb-2 text-white font-normal" href="/blog">All</a>
        {% set taxonomy = get_taxonomy(kind="categories") %}
        {% set categories = taxonomy.items %}
        {% for category in categories %}
            {% set path = category.name | slugify %}
            {% set fullpath = "/categories/" ~ path %}
            <a id="{{path}}" class="mb-2 text-white font-normal" href={{fullpath}}> {{category.name}} </a>
        {% endfor %}
    </div>

{% set section = get_section(path="blog/_index.md")%}

    <div class="lg:pt-6 flex flex-col mb-12 w-64 mr-8 lg:mr-24">
        <h4 class="text-base not-italic font-medium leading-6 text-white mb-6"> FEATURED POSTS</h4>

        {% for page in section.pages %}
        {% if page.extra.isFeatured %}
            <a class="mb-3 text-gray-50" href={{page.permalink}}>{{ page.title }}</a>
        {% endif %}
        {% endfor %}
        
    </div>
</div>

<script>
    function setActiveCategory() {
        let activeCategory = window.location.pathname.split("/")[2]    
        if (typeof activeCategory === "undefined") { activeLink = document.getElementById("all") }
        else { activeLink = document.getElementById(activeCategory)}
        activeLink.className = activeLink.className.replace("text-black font-normal", "text-black font-semibold");
    }

    setActiveCategory()
</script>