{# API #}
{%- set props = props | default([]) -%}
{%- set _dialogId = props.dialogId -%}
{%- set _menuToggleLabel = props.menuToggleLabel | default('Menu') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'HeaderMobileActions' -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}

<div {{ mainProps(props) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
    {% block content %}{% endblock %}
    <Button
        aria-controls="{{ _dialogId }}"
        aria-expanded="false"
        color="secondary"
        data-spirit-target="{{ '#' ~ _dialogId }}"
        data-spirit-toggle="offcanvas"
        isSymmetrical
    >
        <Icon name="hamburger" />
        <VisuallyHidden>{{ _menuToggleLabel }}</VisuallyHidden>
    </Button>
</div>
