misuzu/templates/_layout/header.twig

{% from 'macros.twig' import avatar %}
{% from '_layout/input.twig' import input_checkbox_raw %}

{% if globals.auth_info.isImpersonating %}
    {% set real_user_info = globals.auth_info.realUserInfo %}
    <div class="impersonate">
        <div class="impersonate-content">
            <div class="impersonate-user">
                You are <a href="{{ url('user-profile', {'user': real_user_info.id}) }}" class="impersonate-user-link">
                    <div class="avatar impersonate-user-avatar">{{ avatar(real_user_info.id, 20, real_user_info.name) }}</div>
                    {{ real_user_info.name }}
                </a>
            </div>
            <div class="impersonate-options">
                <a href="{{ url('auth-revert') }}" class="impersonate-options-link" title="Revert"><i class="fas fa-backward"></i></a>
            </div>
        </div>
    </div>
{% endif %}

{% set is_in_manage = is_in_manage|default(false) %}
{% set header_menu = msz_header_menu() %}
{% set user_menu = msz_user_menu(is_in_manage, (is_in_manage ? site_link|default('') : manage_link|default(''))) %}

<nav class="header">
    <div class="header__background"></div>

    <div class="header__desktop">
        <a class="header__desktop__logo" href="{{ url('index') }}" title="{{ globals.site_info.name }}">
            {{ globals.site_info.name }}
        </a>

        <div class="header__desktop__menus">
            {% for item in header_menu %}
                <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 %}
                                    <a href="{{ subitem.url }}" class="header__desktop__link header__desktop__submenu__link">{{ subitem.title }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endfor %}
        </div>

        <div class="header__desktop__user">
            {% for item in user_menu %}
                <a href="{{ item.url }}" title="{{ item.title }}" class="header__desktop__user__button {{ item.class|default('') }}">
                    <i class="{{ item.icon }}"></i>
                </a>
            {% endfor %}

            {% if globals.auth_info.isLoggedIn %}
                {% set user_info = globals.auth_info.userInfo %}
                <a href="{{ url('user-profile', {'user': user_info.id}) }}" class="avatar header__desktop__user__avatar" title="{{ user_info.name }}">
                    {{ avatar(user_info.id, 60, user_info.name) }}
                </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_info.name }}
            </a>

            <label class="header__mobile__icon header__mobile__avatar" for="toggle-mobile-header">
                {% if globals.auth_info.isLoggedIn %}
                    {% set user_info = globals.auth_info.userInfo %}
                    {{ avatar(user_info.id, 40, user_info.name) }}
                {% else %}
                    {{ avatar(0, 40, 'Log in') }}
                {% endif %}
            </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 %}
                    <a href="{{ item.url }}" class="header__mobile__link header__mobile__link--user {{ item.class|default('') }}">
                        <i class="{{ item.icon }}"></i> {{ item.title }}
                    </a>
                {% endfor %}
            </div>

            <div class="header__mobile__navigation">
                {% for item in header_menu %}
                    <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 %}
                            <a href="{{ subitem.url }}" class="header__mobile__link">{{ subitem.title }}</a>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</nav>