{% if projects|length > 0 %}
    <div class="side-panel">
        <ul role="list" class="divide-y divide-gray-100">
            <li class="flex flex-col justify-between gap-x-6">
                <div class="divide-y divide-slate-400/20 bg-white text-[0.8125rem] px-5">
                    <div class="p-3 text-lg font-semibold text-gray-600 text-center"><i
                            class="fas fa-project-diagram fa-sm mr-1 text-gray-600/90"></i> Projects</div>
                    <div>
                        <ul role="list" class="divide-y divide-gray-100">
                            {%- for project in projects %}
                                <li class="py-2 justify-between text-sm text-gray-400 hover:text-gray-600 text-center">
                                    <a href="{{ project.link }}">
                                        {{ project.name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
{% endif %}