forked from Aaron/Kino-Website
63 lines
2.7 KiB
Plaintext
63 lines
2.7 KiB
Plaintext
<nav class="navbar">
|
|
<a href="/" class="logo" id="logo-home" style="text-decoration: none; color: inherit;">EAGLE's IMAX</a>
|
|
<ul class="nav-links">
|
|
<li><a href="/movies" id="link-filme">Aktuelle Filme</a></li>
|
|
<li><a href="/snacks" id="link-snacks">Snacks & Getränke</a></li>
|
|
<li><a href="/about" id="link-about">Über uns</a></li>
|
|
<li><a href="/account" id="link-account">Mein Konto</a></li>
|
|
<li>
|
|
<a href="/cart" id="link-cart" style="position: relative; display: flex; align-items: center; gap: 5px;">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
|
|
Warenkorb
|
|
<span id="cart-badge" class="badge">0</span>
|
|
</a>
|
|
</li>
|
|
<li class="theme-toggle-item">
|
|
<button id="theme-toggle" class="theme-toggle-btn" type="button" aria-label="Theme wechseln">
|
|
<span class="theme-icon theme-icon-sun">☀</span>
|
|
<span class="theme-icon theme-icon-moon">☾</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<script>
|
|
import { cart } from "../scripts/bigConstants";
|
|
|
|
const themeToggle = document.getElementById("theme-toggle");
|
|
const cartBadge = document.getElementById("cart-badge");
|
|
|
|
const updateCartBadge = () => {
|
|
if (!cartBadge) return;
|
|
const totalItems = cart.length;
|
|
cartBadge.textContent = totalItems.toString();
|
|
cartBadge.style.display = totalItems > 0 ? "flex" : "none";
|
|
};
|
|
|
|
const initThemeToggle = () => {
|
|
if (!themeToggle) return;
|
|
const THEME_KEY = "eagleTheme";
|
|
|
|
const applyTheme = (theme: string) => {
|
|
const isLight = theme === "light";
|
|
document.body.classList.toggle("theme-light", isLight);
|
|
document.body.classList.toggle("theme-dark", !isLight);
|
|
themeToggle.classList.toggle("is-light", isLight);
|
|
localStorage.setItem(THEME_KEY, isLight ? "light" : "dark");
|
|
};
|
|
|
|
const storedTheme = localStorage.getItem(THEME_KEY);
|
|
applyTheme(storedTheme === "light" ? "light" : "dark");
|
|
|
|
themeToggle.addEventListener("click", () => {
|
|
const nextTheme = document.body.classList.contains("theme-light") ? "dark" : "light";
|
|
applyTheme(nextTheme);
|
|
});
|
|
};
|
|
|
|
initThemeToggle();
|
|
updateCartBadge();
|
|
|
|
window.addEventListener("cart-updated", updateCartBadge);
|
|
</script>
|