71 lines
2.3 KiB
Twig
71 lines
2.3 KiB
Twig
<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"
|
|
>
|
|
{% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
|
|
</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"
|
|
>
|
|
{% include 'icons/close.svg.twig' with {'class': 'h-full w-full'} %}
|
|
</button>
|
|
<div id="burger-menu__user-section">
|
|
<div id="burger-menu__user-picture-wrapper">
|
|
{% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %}
|
|
</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') }}
|
|
{{ _self.user_action('Settings', 'settings') }}
|
|
{{ _self.user_action('Logout', 'logout') }}
|
|
</div>
|
|
{% else %}
|
|
<span id="burger-menu__user-info">not logged in</span>
|
|
{% endif %}
|
|
</div>
|
|
{% if not logged_in %}
|
|
<hr/>
|
|
<a id="burger-menu__login">
|
|
{% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %}
|
|
<span>Login with Euphcloud</span>
|
|
</a>
|
|
{% endif %}
|
|
<hr/>
|
|
<nav id="burger-menu__nav">
|
|
<ul id="burger-menu__nav-list">
|
|
{{ _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>
|
|
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
|
|
<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 }}">
|
|
{% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
|
|
<span class="flex-1">{{ name }}</span>
|
|
</a>
|
|
</li>
|
|
{% endmacro %}
|