header_bar.html

<div id="header" class="header">
    <div class="header__container">
        <figure class="header__brand">
            <a href="{{ links.home }}" class="brand__link">
                <img src="{{ asset('img/logo-taita.png') }}" alt="{{ store.name }}" title="{{ store.name }}">
            </a>
        </figure>

        <nav class="header__nav">
            <div class="categories__list">
                <ul class="level-one">
                    {% for category in categories %}
                        {% if loop.index <= 3 %}
                        <li class="cat_id-{{ category.id }} level-one__item{% if category.children %} menu__box{% endif %}">
                            <a href="{{ category.link }}" class="level-one__category">{{ category.name }}</a>

                            {% if category.children %}
                                <span class="hidden-lg button__subcategories">
                                    <svg class="nav__icon icon--down"><use xlink:href="#icon-arrow"></use></svg>
                                </span>
                            {% endif %}

                            {% if category.children %}
                                <div class="menu__dropdown">
                                    <ul class="level-two">
                                        {% for child in category.children %}
                                            <li class="cat_id-{{ child.id }} level-two__item">
                                                <a href="{{ child.link }}" class="level-two__category">{{child.name }}</a>
                                            </li>
                                            {% if child.children %}
                                                {% for grandchild in child.children %}
                                                    <li class="cat_id-{{ grandchild.id }} level-three__item">
                                                        <a href="{{ grandchild.link }}" class="level-three__category">{{grandchild.name }}</a>
                                                    </li>
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    </ul>

                                    {% if category.images %}
                                        <figure class="category__image">
                                            <img src="{{ category.images[0] }}" alt="{{ category.name }}" title="{{ category.name }}">
                                        </figure>
                                    {% else %}
                                        <figure class="category__image">
                                            <img src="{{ asset('img/banners/category-img.png') }}" alt="{{ category.name }}" title="{{ category.name }}">
                                        </figure>
                                    {% endif %}
                                </div>
                            {% endif %}
                        </li>
                        {% endif %}
                    {% endfor %}
                </ul>
            </div>
        </nav>

        <div class="header__search">
            {% element 'snippets/search' %}
        </div>

        <ul class="header__list">
            <li class="header__list--item">
                <a href="{{ links.central }}" class="header__list--link">
                    <svg class="header__icon icon--user"><use xlink:href="#icon-user"></use></svg>
                    Minha conta
                </a>
            </li>

            <li class="header__list--item">
                <a href="{{ links.contact }}" class="header__list--link">
                <svg class="header__icon icon--balloon"><use xlink:href="#icon-balloon"></use></svg>
                    Contato
                </a>
            </li>

            <li class="header__list--item">
                <a href="{{ links.orders }}" class="header__list--link">
                    <svg class="header__icon icon--box"><use xlink:href="#icon-box"></use></svg>
                    Pedidos
                </a>
            </li>

        </ul>

        {% element 'snippets/cart' %}

    </div>
</div>