{% set logged_in = true %}
<button>
    <twig:ux:icon name="fa6-solid:bars" />
</button>
<div tabindex="-1">
    <button>
        <twig:ux:icon name="fa6-solid:x" />
    </button>
    <div>
        <div >
            <twig:ux:icon name="fa6-solid:circle-user" />
        </div>
        {% if logged_in %}
            <span>Username</span>
            <span>username@email.com</span>
            <div>
                {{ _self.user_action('Profile', 'user') }}
                {{ _self.user_action('Settings', 'gear') }}
                {{ _self.user_action('Logout', 'right-from-bracket') }}
            </div>
        {% else %}
            <span>not logged in</span>
        {% endif %}
    </div>
    {% if not logged_in %}
        <hr/>
        <a>
            <span>Login with Euphcloud</span>
        </a>
    {% endif %}
    <hr/>
    <nav>
        <ul>
            {{ _self.nav_item('Test1', '#test1', 'bars') }}
            {{ _self.nav_item('Test2', '#test2', 'bars') }}
            {{ _self.nav_item('Test3', '#test3', 'bars') }}
        </ul>
    </nav>
</div>

{% macro user_action(name, icon) %}
    <button>
        <twig:ux:icon name="fa6-solid:{{ icon }}" />
        <span>{{ name }}</span>
    </button>
{% endmacro %}

{% macro nav_item(name, href, icon) %}
    <li>
        <a href="{{ href }}">
            <twig:ux:icon name="fa6-solid:{{ icon }}" />
            <span>{{ name }}</span>
        </a>
    </li>
{% endmacro %}