70 lines
2.6 KiB
JavaScript
70 lines
2.6 KiB
JavaScript
// =============================================
|
|
// Dynamische Navigation
|
|
// Je nach Login-Status wird die Kopfzeile fuer
|
|
// 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 frueh, 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;
|
|
}
|
|
}
|
|
|
|
// Baut die Navigation fuer ausgeloggte Besucher.
|
|
function buildLoggedOutNavigation() {
|
|
const loginIsActive = currentPage === 'login.html';
|
|
const signupIsActive = currentPage === 'signup.html';
|
|
|
|
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 fuer eingeloggte Benutzer.
|
|
function buildLoggedInNavigation() {
|
|
return `
|
|
<a class="nav-tab" href="event_overview.html">Event finden</a>
|
|
<a class="nav-tab" href="event_create.html">Event erstellen</a>
|
|
<a class="button-small" href="my_profil.html" aria-label="Mein Profil">Mein Profil</a>
|
|
`;
|
|
}
|
|
|
|
const currentUser = getCurrentUser();
|
|
const nextMarkup = currentUser ? buildLoggedInNavigation() : buildLoggedOutNavigation();
|
|
|
|
// Wendet das passende Markup auf alle vorhandenen Kopf-Navigationen an.
|
|
navContainers.forEach(container => {
|
|
container.innerHTML = nextMarkup;
|
|
});
|
|
});
|