{% props logged_in = false %}

<div class="burger-menu-user">
    <div class="burger-menu-user__picture-wrapper">
        <twig:ux:icon name="ph:user-circle-fill" class="burger-menu-user__icon-full"/>
    </div>
    {% if logged_in %}
        <span class="burger-menu-user__name">Username</span>
        <span class="burger-menu-user__email">username@email.com</span>
        <div class="burger-menu-user__actions">
            {{ _self.user_action('Profile', 'user') }}
            {{ _self.user_action('Settings', 'gear') }}
            {{ _self.user_action('Logout', 'sign-out') }}
        </div>
    {% else %}
        <span class="burger-menu-user__info">not logged in</span>
    {% endif %}
</div>

{% macro user_action(name, icon) %}
    <button>
        <twig:ux:icon name="ph:{{ icon }}" class="burger-menu__icon"/>
        <span>{{ name }}</span>
    </button>
{% endmacro %}