Jannis/Kino-Website-Framework
1
0
Fork 0
forked from Aaron/Kino-Website
Code Issues 1 Pull Requests Actions Activity

refactor: redistribute main.ts logic into Astro components

Browse Source
This commit is contained in:
Jannis
2026-05-03 21:02:25 +02:00
parent ad2a07a88e
commit e588042876
27 changed files with 1175 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Navbar.astro
View File

@@ -1,12 +1,12 @@
<nav class="navbar">
<div class="logo" id="logo-home" style="cursor:pointer">EAGLE's IMAX</div>
<a href="/" class="logo" id="logo-home" style="text-decoration: none; color: inherit;">EAGLE's IMAX</a>
<ul class="nav-links">
<li><a href="#" id="link-filme">Aktuelle Filme</a></li>
<li><a href="#" id="link-snacks">Snacks & Getränke</a></li>
<li><a href="#" id="link-about">Über uns</a></li>
<li><a href="#" id="link-account">Mein Konto</a></li>
<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="#" id="link-cart" style="position: relative; display: flex; align-items: center; gap: 5px;">
<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>
@@ -20,3 +20,43 @@
</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>