{% set logged_in = true %}
<button
    id="burger-menu__button-open"
    type="button"
    data-drawer-target="burger-menu"
    data-drawer-show="burger-menu"
    data-drawer-placement="right"
    aria-controls="burger-menu"
>
    <twig:ux:icon name="ph:list" />
</button>
<div
    id="burger-menu"
    class="transition-transform translate-x-full"
    tabindex="-1"
>
    <button
        type="button"
        id="burger-menu__button-close"
        data-drawer-hide="burger-menu"
        aria-controls="burger-menu"
    >
        <twig:ux:icon name="ph:x" />
    </button>
    <div id="burger-menu__user-section">
        <div id="burger-menu__user-picture-wrapper">
            <twig:ux:icon name="ph:user-circle-fill" />
        </div>
        {% if logged_in %}
            <span id="burger-menu__user-name">Username</span>
            <span id="burger-menu__user-email">username@email.com</span>
            <div id="burger-menu__user-actions">
                {{ _self.user_action('Profile', 'user-fill') }}
                {{ _self.user_action('Settings', 'gear-fill') }}
                {{ _self.user_action('Logout', 'sign-out') }}
            </div>
        {% else %}
            <span id="burger-menu__user-info">not logged in</span>
        {% endif %}
    </div>
    {% if not logged_in %}
        <hr/>
        <a id="burger-menu__login">
            <span>Login with Euphcloud</span>
        </a>
    {% endif %}
    <hr/>
    <nav id="burger-menu__nav">
        <ul id="burger-menu__nav-list">
            {{ _self.nav_item('Test1', '#test1', 'list') }}
            {{ _self.nav_item('Test2', '#test2', 'list') }}
            {{ _self.nav_item('Test3', '#test3', 'list') }}
        </ul>
    </nav>
</div>

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

{% macro nav_item(name, href, icon) %}
    <li id="burger-menu__nav-item">
        <a id="burger-menu__nav-link" href="{{ href }}">
            <twig:ux:icon name="ph:{{ icon }}" />
            <span class="flex-1">{{ name }}</span>
        </a>
    </li>
{% endmacro %}