send

public/assets/js/header.js

@@ -0,0 +1,108 @@
+// public/assets/js/header.js
+
+document.addEventListener('DOMContentLoaded', function () {
+    // -------------------------
+    // Avatar-Menü ein-/ausblenden
+    // -------------------------
+    const avatarBtn = document.getElementById('userAvatar');
+    const userMenu  = document.getElementById('userMenu');
+
+    if (avatarBtn && userMenu) {
+        avatarBtn.addEventListener('click', function (event) {
+            event.stopPropagation();
+            userMenu.classList.toggle('hidden');
+
+            const expanded = avatarBtn.getAttribute('aria-expanded') === 'true';
+            avatarBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
+        });
+
+        // Klick außerhalb schließt Menü
+        document.addEventListener('click', function (event) {
+            if (!userMenu.classList.contains('hidden')) {
+                const clickedInsideMenu   = userMenu.contains(event.target);
+                const clickedAvatarButton = avatarBtn.contains(event.target);
+
+                if (!clickedInsideMenu && !clickedAvatarButton) {
+                    userMenu.classList.add('hidden');
+                    avatarBtn.setAttribute('aria-expanded', 'false');
+                }
+            }
+        });
+    }
+
+    // -------------------------
+    // Logout-Modal
+    // -------------------------
+    const logoutButtons = document.querySelectorAll('[data-logout-link="true"]');
+    const backdrop      = document.getElementById('logoutModalBackdrop');
+    const btnConfirm    = document.getElementById('logoutConfirm');
+    const btnCancel     = document.getElementById('logoutCancel');
+
+    let logoutTarget = null;
+
+    function showLogoutModal(targetHref) {
+        logoutTarget = targetHref || null;
+        if (!backdrop) return;
+
+        backdrop.classList.remove('hidden');
+        // kleine Fokushilfe: Escape schließt, Klick auf Hintergrund auch
+        document.body.classList.add('overflow-hidden');
+    }
+
+    function hideLogoutModal() {
+        if (!backdrop) return;
+        backdrop.classList.add('hidden');
+        document.body.classList.remove('overflow-hidden');
+        logoutTarget = null;
+    }
+
+    // Logout-Link(s) abfangen
+    if (logoutButtons.length && backdrop && btnConfirm && btnCancel) {
+        logoutButtons.forEach(function (btn) {
+            btn.addEventListener('click', function (event) {
+                event.preventDefault();
+                event.stopPropagation();
+
+                const href = btn.getAttribute('data-logout-href') || btn.getAttribute('href') || '/auth/logout';
+                showLogoutModal(href);
+
+                // Avatar-Menü beim Öffnen des Modals schließen
+                if (userMenu && !userMenu.classList.contains('hidden')) {
+                    userMenu.classList.add('hidden');
+                    if (avatarBtn) {
+                        avatarBtn.setAttribute('aria-expanded', 'false');
+                    }
+                }
+            });
+        });
+
+        // Bestätigen → weiter zur Logout-URL
+        btnConfirm.addEventListener('click', function () {
+            if (logoutTarget) {
+                window.location.href = logoutTarget;
+            } else {
+                window.location.href = '/auth/logout';
+            }
+        });
+
+        // Abbrechen → Modal schließen
+        btnCancel.addEventListener('click', function () {
+            hideLogoutModal();
+        });
+
+        // Klick auf Hintergrund (außerhalb der Card) schließt ebenfalls
+        backdrop.addEventListener('click', function (event) {
+            const card = backdrop.querySelector('div.w-full.max-w-sm');
+            if (card && !card.contains(event.target)) {
+                hideLogoutModal();
+            }
+        });
+
+        // ESC-Taste schließt Modal
+        document.addEventListener('keydown', function (event) {
+            if (event.key === 'Escape' && !backdrop.classList.contains('hidden')) {
+                hideLogoutModal();
+            }
+        });
+    }
+});