<li {% if id != null %} id="{{ id }}" {% endif %}
class="font-allerRegular py-8 border-b-[1px] border-b-grey-100 lg:border-none {% if accordion %} js-accordion {% endif %} {% if class != null %} {{ class }} {% endif %}">
<div class="flex gap-4 items-center">
{% if accordion %}
<div class="cursor-pointer hover:text-blue-400 text-sm whitespace-nowrap active:text-blue-500">{{ title }}</div>
<i class="fa-solid fa-chevron-down text-pink-500 transition-transform"></i>
{% else %}
<a class="js-nav-item block hover:text-blue-400 text-sm whitespace-nowrap active:text-blue-500"
href="{{ path(routePath) }}">{{ title }}</a>
{% endif %}
{% if megaMenu %}
<i class="fa-solid fa-chevron-down text-pink-500 transition-transform"></i>
{% endif %}
</div>
{% if subItems is not empty and accordion %}
<div class="js-accordion-hidden max-h-0 overflow-hidden transition-all duration-300 opacity-0">
{% for item in subItems %}
<a class="block mt-4 text-blue-400" href="{{ path(item.link) }}">{{ item.name }}</a>
{% endfor %}
</div>
{% endif %}
</li>