96 lines
3.3 KiB
Plaintext
96 lines
3.3 KiB
Plaintext
---
|
|
// Navigation items for the theater homepage sections
|
|
const navItems = [
|
|
{ id: 'projekt', label_de: 'Das Projekt', label_en: 'The Project' },
|
|
{ id: 'team', label_de: 'Wer steckt dahinter', label_en: 'Who\'s Behind It' },
|
|
{ id: 'stueck', label_de: 'Das Stück', label_en: 'The Play' },
|
|
{ id: 'mitwirkung', label_de: 'Mitwirkung', label_en: 'Participation' },
|
|
{ id: 'termine', label_de: 'Termine', label_en: 'Schedule' },
|
|
{ id: 'presse', label_de: 'Presse', label_en: 'Press' },
|
|
{ id: 'gallery', label_de: 'Galerie', label_en: 'Gallery' },
|
|
{ id: 'tickets', label_de: 'Tickets', label_en: 'Tickets' },
|
|
];
|
|
---
|
|
|
|
<nav class="anchor-nav bg-[#2b2b56] py-4 md:py-3 transition-all duration-300 z-[100] shadow-[0_2px_5px_rgba(0,0,0,0.1)] [&.sticky]:sticky [&.sticky]:top-0 [&.sticky]:shadow-[0_2px_10px_rgba(0,0,0,0.3)]" id="anchor-nav">
|
|
<div class="max-w-[--max-width-container] mx-auto px-[--spacing-md]">
|
|
<ul class="list-none m-0 p-0 flex flex-wrap justify-center gap-2 md:gap-1">
|
|
{navItems.map((item) => (
|
|
<li class="m-0">
|
|
<a
|
|
href={`#${item.id}`}
|
|
class="nav-link block text-white no-underline py-2 px-4 md:py-1.5 md:px-3 rounded transition-all duration-300 text-sm md:text-[0.85rem] font-medium whitespace-nowrap hover:bg-white/20 hover:-translate-y-0.5 [&.active]:bg-white/30 [&.active]:font-bold"
|
|
data-section={item.id}
|
|
>
|
|
<span class="nav-label-de" data-lang="de">{item.label_de}</span>
|
|
<span class="nav-label-en" data-lang="en">{item.label_en}</span>
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<script>
|
|
// Smooth scroll to sections
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const targetId = link.getAttribute('href');
|
|
if (targetId) {
|
|
const targetSection = document.querySelector(targetId);
|
|
if (targetSection) {
|
|
const navHeight = document.querySelector('.anchor-nav')?.clientHeight || 0;
|
|
const targetPosition = targetSection.getBoundingClientRect().top + window.scrollY - navHeight - 20;
|
|
window.scrollTo({
|
|
top: targetPosition,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Highlight active section on scroll
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '-20% 0px -70% 0px',
|
|
threshold: 0
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const sectionId = entry.target.getAttribute('id');
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('data-section') === sectionId) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections
|
|
document.querySelectorAll('.theater-section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Make nav sticky on scroll
|
|
let lastScroll = 0;
|
|
const nav = document.querySelector('.anchor-nav');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentScroll = window.scrollY;
|
|
|
|
if (currentScroll > 400) {
|
|
nav?.classList.add('sticky');
|
|
} else {
|
|
nav?.classList.remove('sticky');
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
</script>
|