{% if options.use_header_bar == 'on' %}
    <div id="responsive-menu-pro-header-bar-button" class="responsive-menu-pro-header-box">
{% endif %}

<button id="responsive-menu-pro-button" tabindex="1"
        class="responsive-menu-pro-button responsive-menu-pro-{{ options.button_click_animation }}
        {% if options.show_menu_on_page_load %} is-active {% endif %}
        {% if options.button_title_position == 'left' or options.button_title_position == 'right' %} responsive-menu-pro-accessible{% endif %}"
        type="button"
        aria-label="Menu">

    {% if options.button_title_position == 'top' or options.button_title_position == 'left' and options.button_title %}
        <span class="responsive-menu-pro-label responsive-menu-pro-label-{{ options.button_title_position }}">
            <span class="responsive-menu-pro-button-text">{{ options.button_title|translate('button_title') }}</span>
            {% if options.button_title_open %}
                <span class="responsive-menu-pro-button-text-open">{{ options.button_title_open|translate('button_title_open') }}</span>
            {% endif %}
        </span>
    {% endif %}

    <span class="responsive-menu-pro-box">
        {{ options.getButtonIcon()|raw }}{{ options.getButtonIconActive()|raw }}
    </span>

    {% if options.button_title_position == 'bottom' or options.button_title_position == 'right' and options.button_title %}
        <span class="responsive-menu-pro-label responsive-menu-pro-label-{{ options.button_title_position }}">
            <span class="responsive-menu-pro-button-text">{{ options.button_title|translate('button_title') }}</span>
            {% if options.button_title_open %}
                <span class="responsive-menu-pro-button-text-open">{{ options.button_title_open|translate('button_title_open') }}</span>
            {% endif %}
        </span>
    {% endif %}
</button>

{% if options.use_header_bar == 'on' %}
    </div>
{% endif %}