{# `flyoutWrap` is retained as a JS-behaviour hook for the shared core
   mtc_mobile_menu plugin (flyout open/close); `siteMenu` is the BEM block. #}
<nav class="siteMenu flyoutWrap {% if disable_flyout_footer is not empty %}noFooter{% endif %}" aria-label="Main menu">

    <div class="siteMenu__header">

        <div class="siteMenu__header-top">

            <h2>Menu</h2>

            <a href="#" class="flyoutButton" aria-label="Close menu">
                <i class="closeButton">
                    {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/close.svg')|raw }}
                </i>
            </a> <!-- .flyoutButton -->

        </div> <!-- .siteMenu__header-top -->

        {% if is_member is not empty and true == false%}
            <div class="flyoutHeaderUser">

                <div class="userRow">

                    {% if member_initials is not empty %}
                        <div class="userIcon">
                            <span>{{ member_initials }}</span>
                        </div> <!-- .userIcon -->
                    {% endif %}

                    <div class="userName">

                        {% if member_full_name is not empty %}
                            <div class="userNameTop">
                                <h5>{{ member_full_name }}</h5>
                            </div> <!-- .userNameTop -->
                        {% endif %}

                        <div class="userLink">
                            <a href="/members/">My account</a>
                        </div> <!-- .userLink -->

                    </div> <!-- .userName -->

                    {% if new_messages is not empty and new_messages != 0 %}
                        <div class="messages">
                            <span>{{ new_messages }}</span>
                        </div> <!-- .messages -->
                    {% endif %}

                </div> <!-- .userRow -->

            </div> <!-- .flyoutHeaderUser -->
        {% endif %}

    </div> <!-- .siteMenu__header -->

    <div class="siteMenu__body">


        <div class="siteMenu__group siteMenu__group--primary">
            {{ hooks_do_action('load_site_menu',  'Main Navigation Menu') }}
        </div> <!-- .siteMenu__group--primary -->

        <div class="siteMenu__group siteMenu__group--links">
            {{ hooks_do_action('load_site_menu',  'Primary Nav') }}
        </div> <!-- .siteMenu__group--links -->

    </div> <!-- .siteMenu__body -->


    <div class="siteMenu__background">
        {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/backgrounds/menu-backdrop.svg')|raw }}
    </div> <!-- .siteMenu__background -->


</nav> <!-- .siteMenu -->
