k
0b37f73634
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- **Mobile menu improvements**: Added functionality to close the menu when navigation links are clicked. - **HoverCard cleanup**: Removed unused title and date markup for a leaner structure.
82 lines
2.0 KiB
Plaintext
82 lines
2.0 KiB
Plaintext
---
|
|
// src/components/Header.astro
|
|
const { url } = Astro;
|
|
import "../styles/components/Header.css";
|
|
---
|
|
|
|
<header class="header">
|
|
<!-- Desktop Layout -->
|
|
<div class="desktop-layout">
|
|
<div class="logo-container">
|
|
<a href="/">
|
|
<img src="/images/Logo.png" alt="Logo" class="logo" />
|
|
</a>
|
|
</div>
|
|
|
|
<nav class="nav-main">
|
|
<div class="desktop-menu">
|
|
<a href="/#hero">Home</a>
|
|
<a href="/#events">Events</a>
|
|
<a href="/#gallery">Galerie</a>
|
|
<a href="/#drinks">Drinks</a>
|
|
<a href="/#footer">Contact</a>
|
|
<!--<a href="/#about">About</a>
|
|
<a href="/#contact">Contact</a>-->
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile Layout -->
|
|
<div class="mobile-layout">
|
|
<!-- Centered Logo -->
|
|
<div class="mobile-logo-container">
|
|
<a href="/">
|
|
<img src="/images/Logo.png" alt="Logo" class="logo" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Burger Menu Below Logo -->
|
|
<div class="burger-menu">
|
|
<div class="burger-icon">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation Menu (Dropdown) -->
|
|
<div class="mobile-menu">
|
|
<a href="/#hero">Home</a>
|
|
<a href="/#events">Events</a>
|
|
<a href="/#gallery">Galerie</a>
|
|
<a href="/#drinks">Drinks</a>
|
|
<a href="/#footer">Contact</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="header-spacer"></div>
|
|
|
|
<script>
|
|
// Toggle mobile menu when burger icon is clicked
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const burgerIcon = document.querySelector('.burger-icon');
|
|
const mobileMenu = document.querySelector('.mobile-menu');
|
|
const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
|
|
|
|
// Toggle menu when burger icon is clicked
|
|
burgerIcon.addEventListener('click', () => {
|
|
burgerIcon.classList.toggle('active');
|
|
mobileMenu.classList.toggle('active');
|
|
});
|
|
|
|
// Close menu when a navigation link is clicked
|
|
mobileMenuLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
burgerIcon.classList.remove('active');
|
|
mobileMenu.classList.remove('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|