{% sw_extends "@Storefront/storefront/layout/navigation/categories.html.twig" %}
{% block layout_navigation_categories_item %}
{% set navigationMaxDepth = theme_config('atl-header-navigation-max-depth') %}
<div class="{% if level == 0 %}col-2{% else %}col{% endif %} navigation-flyout-column is-level-{{ level }}">
{% block layout_navigation_categories_item_link %}
{% set iconId = treeItem.category.translated.customFields.atl_katana_theme_flyout_icon %}
{% if iconId %}
{% set icon = searchMedia([iconId], context.context) %}
{% set iconMedia = icon.get(iconId) %}
{% set iconUrl = iconMedia.url|sw_encode_url %}
{% set iconAlt = iconMedia.translated.alt ?: name %}
{% set iconTitle = iconMedia.translated.title ?: name %}
{% endif %}
{% if treeItem.category.type == 'folder' %}
<div class="nav-item nav-link navigation-flyout-link is-level-{{ level }}"
title="{{ name }}">
{% if iconUrl %}
<img src="{{ iconUrl }}" alt="{{ iconAlt }}" title="{{ iconTitle }}" class="navigation-flyout-link-icon">
{% endif %}
<span itemprop="name">{{ name }}</span>
</div>
{% else %}
<a class="nav-item nav-link navigation-flyout-link is-level-{{ level }}{% if id == activeId or id in activePath %} active{% endif %}"
href="{{ link }}"
itemprop="url"
{% if category_linknewtab(treeItem.category) %}target="_blank"
{% if treeItem.category.linkType == "external" %}rel="noopener noreferrer"{% endif %}
{% endif %}
title="{{ name }}">
{% if iconUrl %}
<img src="{{ iconUrl }}" alt="{{ iconAlt }}" title="{{ iconTitle }}" class="navigation-flyout-link-icon">
{% endif %}
<span itemprop="name">{{ name }}</span>
</a>
{% endif %}
{% endblock %}
{% block layout_navigation_categories_recoursion %}
{{ parent() }}
{% endblock %}
</div>
{% endblock %}