headermobile.html

<div id="header" class="header">
    <div class="header__container">
        <div class="mobile__nav">
            <a href="#" class="slide-menu-open">
                    <?xml version='1.0' encoding='iso-8859-1'?>
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 24 24">
                      <g>
                        <path d="M24,3c0-0.6-0.4-1-1-1H1C0.4,2,0,2.4,0,3v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V3z"/>
                        <path d="M24,11c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V11z"/>
                        <path d="M24,19c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V19z"/>
                      </g>
                    </svg>
            </a>
            <div class="side-menu-overlay" style="width: 0px; opacity: 0;"></div>
            <div class="side-menu-wrapper">
                <a href="#" class="menu-close">&times;</a>
                <div class="mobile-account-wrapper">
                <div class="categories__list">
                    <ul class="level-one">
                        {% for category in categories %}

                            <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>
                        {% endfor %}
                    </ul>
                </div>
                <ul class="account__list tray-hide" data-logged-user="true">
                    <li class="account__item"><a href="{{ links.login }}">Minha conta</a></li>
                    <li class="account__item"><a href="{{ links.orders }}">Meus pedidos</a></li>
                    <li class="account__item"><a href="{{ links.logout }}">Sair</a></li>
                </ul>

                <ul class="account__list tray-hide" data-logged-user="false">
                    <li class="account__item"><a href="{{ links.register }}">Cadastre-se</a></li>
                    <li class="account__item"><a href="{{ links.login }}">Minha conta</a></li>
                    <li class="account__item"><a href="{{ links.orders }}">Meus pedidos</a></li>
                </ul>

                <ul class="contact__list">
                    <li class="contact__item contact__item--whatsapp">
                        <svg class="contact__icon icon--whatsapp"><use xlink:href="#icon-whatsapp"></use></svg>
                        <a href="https://api.whatsapp.com/send?phone={{ settings.whatsappLink }}" class="contact__link" target="_blank">{{ settings.whatsapp }}</a>
                    </li>

                    <li class="contact__item contact__item--schedule">
                        <span class="contact__text">{{ settings.schedule }}</span>
                    </li>

                    <li class="contact__item contact__item--email">
                            <svg class="contact__icon icon--mail"><use xlink:href="#icon-mail"></use></svg>
                        <a href="mailto:{{ settings.email }}" class="contact__link">{{ settings.email }}</a>
                    </li>
                </ul>

                </div>
            </div>
        </div>

        <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>

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

        {% element 'snippets/cart' %}
    </div>


</div>