120 lines
4.1 KiB
JavaScript
120 lines
4.1 KiB
JavaScript
// =============================================
|
|
// Dynamische Navigation
|
|
// Je nach Login-Status wird die Kopfzeile für
|
|
// alle Seiten mit passendem Markup aufgebaut.
|
|
// =============================================
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const CURRENT_USER_KEY = 'socialCookingCurrentUser';
|
|
const navContainers = document.querySelectorAll('.nav-tab-links');
|
|
const currentPage = (window.location.pathname.split('/').pop() || 'index.html').toLowerCase();
|
|
|
|
// Beendet früh, falls auf einer Seite keine Hauptnavigation vorhanden ist.
|
|
if (!navContainers.length) {
|
|
return;
|
|
}
|
|
|
|
// Liest den aktiven Benutzer robust aus localStorage.
|
|
function getCurrentUser() {
|
|
try {
|
|
const stored = localStorage.getItem(CURRENT_USER_KEY);
|
|
return stored ? JSON.parse(stored) : null;
|
|
} catch (error) {
|
|
console.error('Aktueller Benutzer konnte nicht gelesen werden.', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// Logout-Funktion
|
|
window.logout = function() {
|
|
localStorage.removeItem(CURRENT_USER_KEY);
|
|
window.location.href = 'index.html';
|
|
};
|
|
|
|
// Baut die Navigation für ausgeloggte Besucher.
|
|
function buildLoggedOutNavigation() {
|
|
const loginIsActive = currentPage === 'login.html';
|
|
const signupIsActive = currentPage === 'signup.html';
|
|
const isIndex = currentPage === 'index.html' || currentPage === '';
|
|
|
|
// Auf der Startseite, Login und Signup nur Login anzeigen.
|
|
if (isIndex || loginIsActive || signupIsActive) {
|
|
return `
|
|
<a
|
|
class="button-small"
|
|
href="login.html"
|
|
aria-label="Login"
|
|
>
|
|
Login
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
return `
|
|
<a
|
|
class="button-small auth-nav-button ${loginIsActive ? 'auth-nav-button--active' : 'auth-nav-button--default'}"
|
|
href="login.html"
|
|
aria-label="Login"
|
|
${loginIsActive ? 'aria-current="page"' : ''}
|
|
>
|
|
Login
|
|
</a>
|
|
<a
|
|
class="button-small auth-nav-button ${signupIsActive ? 'auth-nav-button--active' : 'auth-nav-button--default'}"
|
|
href="signup.html"
|
|
aria-label="Signup"
|
|
${signupIsActive ? 'aria-current="page"' : ''}
|
|
>
|
|
Signup
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
// Baut die Navigation für eingeloggte Benutzer.
|
|
function buildLoggedInNavigation(user) {
|
|
const initial = (user.vorname || 'U').charAt(0).toUpperCase();
|
|
const isEventOverview = currentPage === 'event_overview.html';
|
|
const isEventCreate = currentPage === 'event_create.html';
|
|
|
|
return `
|
|
<a
|
|
class="nav-tab${isEventCreate ? ' nav-tab--active' : ''}"
|
|
href="event_create.html"
|
|
${isEventCreate ? 'aria-current="page"' : ''}
|
|
>
|
|
Event erstellen
|
|
</a>
|
|
<a
|
|
class="nav-tab${isEventOverview ? ' nav-tab--active' : ''}"
|
|
href="event_overview.html"
|
|
${isEventOverview ? 'aria-current="page"' : ''}
|
|
>
|
|
Event finden
|
|
</a>
|
|
<button
|
|
class="button-small logout-button"
|
|
onclick="logout()"
|
|
aria-label="Logout"
|
|
>
|
|
Logout
|
|
</button>
|
|
<a
|
|
class="profile-pill"
|
|
href="my_profil.html"
|
|
aria-label="Mein Profil"
|
|
title="${user.vorname || 'Profil'}"
|
|
>
|
|
${initial}
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
const currentUser = getCurrentUser();
|
|
const nextMarkup = currentUser ? buildLoggedInNavigation(currentUser) : buildLoggedOutNavigation();
|
|
|
|
// Wendet das passende Markup auf alle vorhandenen Kopf-Navigationen an.
|
|
navContainers.forEach(container => {
|
|
container.innerHTML = nextMarkup;
|
|
});
|
|
});
|