misuzu/templates/_layout/header.twig

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

{% set site_menu = [
    {
        'title': 'Home',
        'url': '/',
        'menu': [
            {
                'title': 'Members',
                'url': '/members.php',
            },
            {
                'title': 'Changelog',
                'url': '/changelog.php',
            },
            {
                'title': 'Contact',
                'url': '/info.php/contact',
            },
            {
                'title': 'Rules',
                'url': '/info.php/rules',
            },
            {
                'title': 'Twitter',
                'url': 'https://twitter.com/flashiinet',
            },
        ],
    },
    {
        'title': 'News',
        'url': '/news.php',
    },
    {
        'title': 'Forum',
        'url': '/forum',
    },
    {
        'title': 'Chat',
        'url': 'https://chat.flashii.net',
    },
] %}

{% set user_menu =
    current_user is defined
    ? [
        {
            'title': 'Profile',
            'url': '/profile.php?u=' ~ current_user.user_id,
            'icon': 'fas fa-user fa-fw',
        },
        {
            'title': 'Settings',
            'url': '/settings.php',
            'icon': 'fas fa-cog fa-fw',
        },
        {
            'title': 'Return to Site',
            'url': site_link|default('/'),
            'icon': 'fas fa-door-open fa-fw',
            'display': has_manage_access and manage_menu is defined
        },
        {
            'title': 'Manage',
            'url': manage_link|default('/manage/index.php'),
            'icon': 'fas fa-door-closed fa-fw',
            'display': has_manage_access and manage_menu is not defined
        },
        {
            'title': 'Log out',
            'url': '/auth.php?m=logout&s=' ~ csrf_token('logout'),
            'icon': 'fas fa-sign-out-alt fa-fw',
        },
    ]
    : [
        {
            'title': 'Register',
            'url': '/auth.php?m=register',
            'icon': 'fas fa-user-plus fa-fw',
        },
        {
            'title': 'Log in',
            'url': '/auth.php?m=login',
            'icon': 'fas fa-sign-in-alt fa-fw',
        },
    ]
%}

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

    <div class="header__desktop">
        <a class="header__desktop__logo" href="/" title="{{ globals.site_name }}">
            {{ globals.site_name }}
        </a>

        <div class="header__desktop__menus">
            {% for item in site_menu %}
                <div class="header__desktop__menu">
                    {{ item.url|html_link(item.title, {'class': 'header__desktop__link header__desktop__menu__link'})|raw }}

                    {% 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 %}
                                    {{ subitem.url|html_link(subitem.title, {'class': 'header__desktop__link header__desktop__submenu__link'})|raw }}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% 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">
                        <i class="{{ item.icon }}"></i>
                    </a>
                {% endif %}
            {% endfor %}

            {% if current_user is defined %}
                <a href="/profile.php?u={{ current_user.user_id }}" class="avatar header__desktop__user__avatar" title="{{ current_user.username }}"
                    style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');{{ current_user.user_colour|html_colour }}"></a>
            {% else %}
                <a href="/auth.php?m=login" class="avatar header__desktop__user__avatar"
                    style="background-image:url('/profile.php?m=avatar');"></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="/">
                {{ globals.site_name }}
            </a>

            <label class="header__mobile__icon avatar header__mobile__avatar" for="toggle-mobile-header"
                style="background-image:url('/profile.php?u={{ current_user.user_id|default(0) }}&amp;m=avatar');">
            </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">
                            <i class="{{ item.icon }}"></i> {{ item.title }}
                        </a>
                    {% endif %}
                {% endfor %}
            </div>

            <div class="header__mobile__navigation">
                {% for item in site_menu %}
                    {{ item.url|html_link(item.title, {'class': 'header__mobile__link header__mobile__link--primary'})|raw }}

                    {% if item.menu is defined and item.menu is iterable %}
                        {% for subitem in item.menu %}
                            {{ subitem.url|html_link(subitem.title, {'class': 'header__mobile__link'})|raw }}
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</nav>