готовый сайт

src/main/resources/static/js/site/blocks/header.js

@@ -1,3 +1,78 @@
-function initHeader($header){
+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-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>
+                    </ul>
+                    <div class="ms-3 d-flex gap-2 align-items-center">
+                        ${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 = '/'; }
+            });
+        });
+    }
+}