Add responsive mobile menu with burger icon and animations:

- **Mobile menu implementation**: Introduced a burger menu for smaller screens, enabling navigation toggle.
- **Responsive styles**: Added CSS adjustments for headers and navigation under `768px` and `480px` breakpoints.
- **Interactive behavior**: Implemented toggle functionality using JavaScript for mobile menu activation.
- **Styling updates**: Enhanced mobile and desktop navigation distinction with scoped CSS changes.

src/components/Header.astro

@@ -11,9 +11,9 @@ import "../styles/components/Header.css";
 		</a>
 	</div>
 
-	<!-- Hauptnavigation: immer Home, About, Contact -->
+	<!-- Desktop Navigation -->
 	<nav class="nav-main">
-		<div>
+		<div class="desktop-menu">
 			<a href="/#hero">Home</a>
 			<a href="/#events">Events</a>
 			<a href="/#gallery">Galerie</a>
@@ -23,6 +23,37 @@ import "../styles/components/Header.css";
 			<a href="/#contact">Contact</a>-->
 		</div>
 	</nav>
+
+	<!-- Mobile Burger Menu -->
+	<div class="burger-menu">
+		<div class="burger-icon">
+			<span></span>
+			<span></span>
+			<span></span>
+		</div>
+	</div>
+
+	<!-- Mobile Navigation Menu -->
+	<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>
 </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');
+		
+		burgerIcon.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu.classList.toggle('active');
+		});
+	});
+</script>

src/styles/components/Header.css

@@ -21,7 +21,6 @@
 	/* Should match the header height */
 }
 
-
 .logo-container {
 	display: flex;
 	align-items: center;
@@ -55,6 +54,82 @@
 	color: #ffa500;
 }
 
+/* Burger Menu Styles */
+.burger-menu {
+	display: none;
+	cursor: pointer;
+}
+
+.burger-icon {
+	width: 30px;
+	height: 24px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.burger-icon span {
+	display: block;
+	height: 3px;
+	width: 100%;
+	background-color: white;
+	border-radius: 3px;
+	transition: all 0.3s ease;
+}
+
+.burger-icon.active span:nth-child(1) {
+	transform: translateY(10.5px) rotate(45deg);
+}
+
+.burger-icon.active span:nth-child(2) {
+	opacity: 0;
+}
+
+.burger-icon.active span:nth-child(3) {
+	transform: translateY(-10.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+	display: none;
+	position: fixed;
+	top: 70px;
+	left: 0;
+	right: 0;
+	background-color: #0e0c0c;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	transform: translateY(-100%);
+	transition: transform 0.3s ease;
+	z-index: 999;
+}
+
+.mobile-menu.active {
+	transform: translateY(0);
+}
+
+.mobile-menu a {
+	margin: 1rem 0;
+	color: white;
+	text-decoration: none;
+	font-size: 1.2rem;
+	text-align: center;
+	width: 100%;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid #333;
+}
+
+.mobile-menu a:last-child {
+	border-bottom: none;
+}
+
+.mobile-menu a:hover {
+	color: #ffa500;
+}
+
 @media (max-width: 768px) {
 	.header {
 		height: 65px;
@@ -68,11 +143,24 @@
 	.header-spacer {
 		height: 65px;
 	}
+
+	.burger-menu {
+		display: block;
+	}
+
+	.nav-main {
+		display: none;
+	}
+
+	.mobile-menu {
+		display: flex;
+		top: 65px;
+	}
 }
 
 @media (max-width: 480px) {
 	.header {
-		padding: 0.5rem;
+		padding: 0.5rem 1rem;
 		height: 60px;
 	}
 
@@ -81,12 +169,11 @@
 		height: 2.5em;
 	}
 
-	.nav-main a {
-		margin: 0 0.5rem;
-		font-size: 0.9rem;
-	}
-
 	.header-spacer {
 		height: 60px;
 	}
+
+	.mobile-menu {
+		top: 60px;
+	}
 }