From f3952e7e81b498f33b862a37868c20c9059ba2ee Mon Sep 17 00:00:00 2001
From: k <kenzo.signer@bookageek.ch>
Date: Sun, 20 Jul 2025 13:32:43 +0200
Subject: [PATCH] Add section IDs and smooth scrolling for improved navigation:

- Updated components (`Hero`, `Welcome`, `EventsGrid`, `ImageCarousel`, `Drinks`) to accept optional `id` props and applied them to `<section>` elements.
- Enabled smooth scrolling by adding `scroll-behavior: smooth` to global styles.
- Enhanced dropdown menu: added internal links for section navigation and adjusted styling for improved responsiveness.
- Updated color handling in `ImageCarousel` to use CSS variables for better theme consistency.
---
 src/components/Drinks.astro         |  4 ++-
 src/components/EventsGrid.astro     |  5 ++--
 src/components/Header.astro         | 15 +++++++----
 src/components/Hero.astro           |  4 ++-
 src/components/ImageCarousel.astro  |  4 +--
 src/components/Welcome.astro        |  4 ++-
 src/pages/index.astro               | 10 +++----
 styles/components/EventsGrid.css    |  8 ++++++
 styles/components/Header.css        | 41 ++++++++++++++++++++++++++++-
 styles/components/ImageCarousel.css |  2 +-
 styles/index.css                    |  5 ++++
 11 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/Drinks.astro b/src/components/Drinks.astro
index 6e8ed4f..4c20808 100644
--- a/src/components/Drinks.astro
+++ b/src/components/Drinks.astro
@@ -1,7 +1,9 @@
 ---
 import "../../styles/components/Drinks.css"
+
+const { id } = Astro.props;
 ---
-<section class="Drinks">
+<section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
     <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
diff --git a/src/components/EventsGrid.astro b/src/components/EventsGrid.astro
index 2dc709a..9b4ee4e 100644
--- a/src/components/EventsGrid.astro
+++ b/src/components/EventsGrid.astro
@@ -8,11 +8,12 @@ interface Event {
   date: Date;
   description: string;
 }
-const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
+const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
 import '../../styles/components/EventsGrid.css';
 ---
 
-<section class="events-gird container">
+<section id={id} class="events-gird container">
+	<h2 class="section-title">Events</h2>
 
 	{events.map((event: Event)  => (
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index af177c3..d9885cd 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -20,12 +20,17 @@ import "../../styles/components/Header.css"
 			<a href="/" class="dropdbtn">Home</a>
 
 			<div class="dropdown-content">
-
-				<a href="/events">Events</a>
-				<a href="/gallery">Gallery</a>
+				<!-- Section navigation links -->
+				<a href="/#hero">Home</a>
+				<a href="/#welcome">Willkommen</a>
+				<a href="/#events">Events</a>
+				<a href="/#gallery">Galerie</a>
+				<a href="/#drinks">Drinks</a>
+				
+				<!-- Page navigation links -->
+				<a href="/events">Events Page</a>
+				<a href="/gallery">Gallery Page</a>
 				<a href="/openings">Openings</a>
-				<a href="/drinks">Drinks</a>
-
 			</div>
 
 		</div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index d615481..5035d46 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,9 +1,11 @@
 ---
 // src/components/Hero.astro
 import "../../styles/components/Hero.css"
+
+const { id } = Astro.props;
 ---
 
-<section class="hero container">
+<section id={id} class="hero container">
 
 	<div class="hero-overlay">
 
diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro
index 2c1a3c4..24312de 100644
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@@ -7,10 +7,10 @@ interface Image {
   alt: string;
 }
 
-const { images = [] } = Astro.props as { images: Image[] };
+const { images = [], id } = Astro.props as { images: Image[], id?: string };
 ---
 
-<section class="image-carousel-container">
+<section id={id} class="image-carousel-container">
   <h2 class="section-title">Galerie</h2>
   <div class="image-carousel">
     <button class="nav-button prev-button" aria-label="Previous image">
diff --git a/src/components/Welcome.astro b/src/components/Welcome.astro
index 41734ee..0c58c41 100644
--- a/src/components/Welcome.astro
+++ b/src/components/Welcome.astro
@@ -1,9 +1,11 @@
 ---
 // src/components/Welcome.astro
 import "../../styles/components/Welcome.css"
+
+const { id } = Astro.props;
 ---
 
-<section class="welcome container">
+<section id={id} class="welcome container">
 
 	<div class="welcome-text">
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5c39eb2..9b92a01 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,9 +31,9 @@ const images = [
 
 <Layout>
 
-	<Hero />
-	<Welcome />
-	<EventsGrid events={events} />
-	<ImageCarousel images={images} />
-	<Drinks />
+	<Hero id="hero" />
+	<Welcome id="welcome" />
+	<EventsGrid id="events" events={events} />
+	<ImageCarousel id="gallery" images={images} />
+	<Drinks id="drinks" />
 </Layout>
diff --git a/styles/components/EventsGrid.css b/styles/components/EventsGrid.css
index 04d6ef7..9f20e8b 100644
--- a/styles/components/EventsGrid.css
+++ b/styles/components/EventsGrid.css
@@ -1,3 +1,11 @@
+.section-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
 .events-gird {
   display: flex;
   flex-wrap: wrap;
diff --git a/styles/components/Header.css b/styles/components/Header.css
index fd00881..ee047a6 100644
--- a/styles/components/Header.css
+++ b/styles/components/Header.css
@@ -61,10 +61,12 @@
     display: none;
     position: absolute;
     background-color: #0e0c0c;
-    min-width: 160px;
+    min-width: 200px;
     z-index: 1;
     border: 1px solid #444;
     border-radius: 4px;
+    max-height: 400px;
+    overflow-y: auto;
 }
 
 .dropdown-content a {
@@ -91,4 +93,41 @@
     .nav-links {
         gap: 1rem;
     }
+    
+    .nav-main {
+        margin-right: 20px;
+    }
+    
+    .logo {
+        margin-left: 1em;
+        height: 3em;
+    }
+    
+    .dropdown-content {
+        right: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem;
+    }
+    
+    .logo {
+        margin-left: 0.5em;
+        height: 2.5em;
+    }
+    
+    .nav-main {
+        margin-right: 10px;
+    }
+    
+    .nav-main a,
+    .dropdbtn {
+        margin: 0 0.5rem;
+        font-size: 0.9rem;
+    }
 }
diff --git a/styles/components/ImageCarousel.css b/styles/components/ImageCarousel.css
index 172aac7..fc6997e 100644
--- a/styles/components/ImageCarousel.css
+++ b/styles/components/ImageCarousel.css
@@ -12,7 +12,7 @@
   margin-bottom: 1.5rem;
   font-size: 2rem;
   font-weight: bold;
-  color: #333;
+  color: var(--color-text);
 }
 
 .image-carousel {
diff --git a/styles/index.css b/styles/index.css
index 03c1db2..68e3acd 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -5,6 +5,11 @@
 	box-sizing: border-box;
 }
 
+/* Add smooth scrolling behavior */
+html {
+	scroll-behavior: smooth;
+}
+
 body {
 	font-family: var(--font-family-primary);
 	background-color: var(--color-background);