{% block layout_navigation_flyout %}
<div class="row">
<div class="col-3 flyout-logo">
<a href="{{ path('frontend.home.page') }}">
<picture class="flyout-logo-picture">
<img src="{{ theme_config('sw-logo-mobile') |sw_encode_url }}"
alt="{{ "header.logoLink"|trans|striptags }}"
class="img-fluid header-logo-main-img"/>
</picture>
{% if 'header.slogan'|trans|sw_sanitize != 'header.slogan' %}
<div class="header-logo-slogan">
{{ 'header.slogan'|trans|sw_sanitize }}
</div>
{% endif %}
</a>
</div>
</div>
{% set mainNavigation = page.header.navigation.tree|filter(n =>
n.category.translated.name == 'Main Navigation')|first %}
{% if mainNavigation %}
<div class="row">
{% for i in 1..4 %}
<div class="col-12 col-md-3">
{% for subTree in mainNavigation.children|filter(n =>
n.category.translated.customFields.migration_shopware5_category_nav_col in [
i, i == 1 ? null : ''
]) %}
{% sw_include '@Storefront/storefront/layout/navigation/flyout-item.html.twig'
with { navigationTree: subTree }
%}
{% endfor %}
</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}