misuzu/templates/_layout/header.twig

103 lines
4.7 KiB
Twig
Raw Normal View History

2022-09-13 13:14:49 +00:00
{% from 'macros.twig' import avatar %}
{% from '_layout/input.twig' import input_checkbox_raw %}
<nav class="header">
<div class="header__background"></div>
<div class="header__desktop">
<a class="header__desktop__logo" href="{{ url('index') }}" title="{{ globals.site_name }}">
{{ globals.site_name }}
</a>
<div class="header__desktop__menus">
{% for item in site_menu %}
{% if item.display is not defined or item.display %}
<div class="header__desktop__menu">
<a href="{{ item.url }}" class="header__desktop__link header__desktop__menu__link">{{ item.title }}</a>
{% if item.menu is defined and item.menu is iterable %}
<div class="header__desktop__submenu">
<div class="header__desktop__submenu__background"></div>
<div class="header__desktop__submenu__content">
{% for subitem in item.menu %}
{% if subitem.display is not defined or subitem.display %}
<a href="{{ subitem.url }}" class="header__desktop__link header__desktop__submenu__link">{{ subitem.title }}</a>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="header__desktop__user">
{% for item in user_menu %}
{% if item.display is not defined or item.display %}
<a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button {{ item.class|default('') }}">
<i class="{{ item.icon }}"></i>
</a>
{% endif %}
{% endfor %}
{% if current_user is defined %}
<a href="{{ url('user-profile', {'user': current_user.id}) }}" class="avatar header__desktop__user__avatar" title="{{ current_user.username }}" style="--user-colour: {{ current_user.colour }}">
{{ avatar(current_user.id, 60, current_user.username) }}
</a>
{% else %}
<a href="{{ url('auth-login') }}" class="avatar header__desktop__user__avatar">
{{ avatar(0, 60, 'Log in') }}
</a>
{% endif %}
</div>
</div>
<div class="header__mobile">
<div class="header__mobile__icons">
<label class="header__mobile__icon" for="toggle-mobile-header">
<i class="fas fa-bars"></i>
</label>
<a class="header__mobile__logo header__mobile__icon" href="{{ url('index') }}">
{{ globals.site_name }}
</a>
<label class="header__mobile__icon header__mobile__avatar" for="toggle-mobile-header">
{{ avatar(current_user.id|default(0), 40, current_user.username|default('Log in')) }}
</label>
</div>
{{ input_checkbox_raw('', false, 'header__mobile__toggle', '', false, {'id':'toggle-mobile-header'}) }}
<div class="header__mobile__menu">
<div class="header__mobile__menu__spacer"></div>
<div class="header__mobile__user">
{% for item in user_menu %}
{% if item.display is not defined or item.display %}
<a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user {{ item.class|default('') }}">
<i class="{{ item.icon }}"></i> {{ item.title }}
</a>
{% endif %}
{% endfor %}
</div>
<div class="header__mobile__navigation">
{% for item in site_menu %}
{% if item.display is not defined or item.display %}
<a href="{{ item.url }}" class="header__mobile__link header__mobile__link--primary">{{ item.title }}</a>
{% if item.menu is defined and item.menu is iterable %}
{% for subitem in item.menu %}
{% if subitem.display is not defined or subitem.display %}
<a href="{{ subitem.url }}" class="header__mobile__link">{{ subitem.title }}</a>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</nav>