Tennis-Site/src/main/resources/static/js/site/blocks/header.js

function getCsrf() {
    const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/);
    return match ? decodeURIComponent(match[1]) : '';
}

export function initHeader($header) {
    const authed = window.isAuth === true;
    const user = window.currentUser;
    const displayName = user && user.firstName ? user.firstName : (user && user.email ? user.email : 'Профиль');

    $header.append(`
        <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
            <div class="container">
                <a class="navbar-brand fw-black" href="/" style="font-size:1.6rem;font-weight:800;color:var(--tennis-dark)">
                    <span style="color:var(--tennis-green)">Tennis</span>Hub
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto align-items-lg-center gap-1">
                        <li class="nav-item">
                            <a class="nav-link" href="/#clubs-section">
                                <i class="bi bi-building me-1"></i>Клубы
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/#events-section">
                                <i class="bi bi-calendar-event me-1"></i>Мероприятия
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/gallery">
                                <i class="bi bi-images me-1"></i>Галерея
                            </a>
                        </li>
                    </ul>
                    <div class="ms-0 ms-lg-3 mt-2 mt-lg-0 d-flex gap-2 align-items-center pb-2 pb-lg-0">
                        ${authed
                            ? `<div class="dropdown">
                                   <button class="btn btn-sm fw-semibold dropdown-toggle"
                                           style="background:var(--tennis-green);color:#fff;border-radius:20px;padding:6px 16px"
                                           data-bs-toggle="dropdown" aria-expanded="false">
                                       <i class="bi bi-person-circle me-1"></i>${displayName}
                                   </button>
                                   <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                       <li>
                                           <a class="dropdown-item" href="/admin">
                                               <i class="bi bi-grid me-2"></i>Кабинет
                                           </a>
                                       </li>
                                       <li><hr class="dropdown-divider"></li>
                                       <li>
                                           <button class="dropdown-item text-danger border-0 bg-transparent w-100 text-start" id="logout-btn">
                                               <i class="bi bi-box-arrow-right me-2"></i>Выйти
                                           </button>
                                       </li>
                                   </ul>
                               </div>`
                            : `<a href="/account/login" class="btn btn-sm fw-semibold"
                                   style="background:var(--tennis-green);color:#fff;border-radius:20px;padding:6px 16px">
                                   <i class="bi bi-person me-1"></i>Войти
                               </a>`
                        }
                    </div>
                </div>
            </div>
        </nav>
    `);

    if (authed) {
        $('#logout-btn').on('click', function () {
            const $btn = $(this);
            $btn.html('<span class="spinner-border spinner-border-sm me-1"></span>Выход...').prop('disabled', true);
            $.ajax({
                url:  '/account/logout',
                type: 'POST',
                beforeSend: xhr => xhr.setRequestHeader('X-XSRF-TOKEN', getCsrf()),
                complete: () => { window.location.href = '/'; }
            });
        });
    }
}