From 935338c23ba9028100777b2901b66f7419eca392 Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Tue, 7 Oct 2025 12:42:29 +0200
Subject: [PATCH 1/2] i18n(de): update section 3 blog tutorial

---
 .../docs/de/tutorial/3-components/4.mdx       | 160 +++++++++---------
 1 file changed, 81 insertions(+), 79 deletions(-)

diff --git a/src/content/docs/de/tutorial/3-components/4.mdx b/src/content/docs/de/tutorial/3-components/4.mdx
index 4868f18c5cc49..109ec79bbe28e 100644
--- a/src/content/docs/de/tutorial/3-components/4.mdx
+++ b/src/content/docs/de/tutorial/3-components/4.mdx
@@ -15,131 +15,127 @@ import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Fügen wir ein Hamburger-Menü hinzu, um deine Links auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!
+Fügen wir ein Button hinzu, um dein Navigationsmenü auf mobilen Bildschirmgrößen zu öffnen und zu schließen, was etwas clientseitige Interaktivität erfordert!
 
 <PreCheck>
-  - Erstelle eine Hamburger-Menü-Komponente
+  - Erstelle eine Menü-Komponente
   - Schreibe ein `<script>`, das es deinen Seitenbesuchern erlaubt, das Navigationsmenü zu öffnen und zu schließen
   - Verschiebe dein JavaScript in eine `.js`-Datei
 </PreCheck>
 
-## Baue eine Hamburger-Komponente
+## Baue eine Menü-Komponente
 
-Erstelle eine `<Hamburger />`-Komponente, um dein mobiles Menü zu öffnen und zu schließen.
+Erstelle eine `<Menu />`-Komponente, um dein mobiles Menü zu öffnen und zu schließen.
 
 <Steps>
-1. Erstelle eine Datei namens `Hamburger.astro` in `src/components/`
+1. Erstelle eine Datei namens `Menu.astro` in `src/components/`
 
-2. Kopiere den folgenden Code in deine Komponente. Dies wird dein „Hamburger“-Menü mit 3 Linien darstellen, um deine Navigationslinks auf mobilen Geräten anzuzeigen und zu verstecken. (Die neuen CSS-Styles fügst du später in `global.css` hinzu.)
+2. Kopiere den folgenden Code in deine Komponente. Es erstellt eine Schaltfläche, die dazu dient, die Sichtbarkeit der Navigationslinks auf mobilen Geräten ein- und auszublenden. (Die neuen CSS-Styles fügst du später in `global.css` hinzu.)
 
-    ```astro title="src/components/Hamburger.astro"
+    ```astro title="src/components/Menu.astro"
     --- 
     ---
-    <div class="hamburger">
-      <span class="line"></span>
-      <span class="line"></span>
-      <span class="line"></span>
-    </div>
+    <button aria-expanded="false" aria-controls="main-menu" class="menu">
+      Menü
+    </button>
     ```
 
-3. Platziere diese neue `<Hamburger />`-Komponente direkt vor deiner `<Navigation />`-Komponente in `Header.astro`. 
+3. Platziere diese neue `<Menu />`-Komponente direkt vor deiner `<Navigation />`-Komponente in `Header.astro`. 
 
     <details>
     <summary>Zeige mir den Code!</summary>
 
     ```astro title="src/components/Header.astro" ins={2,7}
     ---
-    import Hamburger from './Hamburger.astro';
+    import Menu from './Menu.astro';
     import Navigation from './Navigation.astro';
     ---
     <header>
       <nav>
-        <Hamburger />
+        <Menu />
         <Navigation />
       </nav>
     </header>
     ```
     </details>
 
-4. Füge die folgenden Styles für deine Hamburger-Komponente hinzu:
+4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Stile::
 
-    ```css title="src/styles/global.css" ins={2-13, 56-58}
+    ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
     /* Navigation-Styles */
-    .hamburger {
-        padding-right: 20px;
-        cursor: pointer;
-      }
-
-      .hamburger .line {
-        display: block;
-        width: 40px;
-        height: 5px;
-        margin-bottom: 10px;
-        background-color: #ff9776;
-      }
-
+    .menu {
+      background-color: #0d0950;
+      border: none;
+      color: #fff;
+      font-size: 1.2rem;
+      font-weight: bold;
+      padding: 5px 10px;
+    }
+
+    .nav-links {
+      width: 100%;
+      display: none;
+      margin: 0;
+    }
+
+    .nav-links a {
+      display: block;
+      text-align: center;
+      padding: 10px 0;
+      text-decoration: none;
+      font-size: 1.2rem;
+      font-weight: bold;
+      text-transform: uppercase;
+      color: #0d0950;
+    }
+
+    .nav-links a:hover, 
+    .nav-links a:focus {
+      background-color: #ff9776;
+    }
+
+    :has(.menu[aria-expanded="true"]) .nav-links {
+      display: unset;
+    }
+
+    @media screen and (min-width: 636px) {
       .nav-links {
-        width: 100%;
-        top: 5rem;
-        left: 48px;
-        background-color: #ff9776;
-        display: none;
-        margin: 0;
-      }
-
-      .nav-links a {
+        margin-left: 5em;
         display: block;
-        text-align: center;
-        padding: 10px 0;
-        text-decoration: none;
-        font-size: 1.2rem;
-        font-weight: bold;
-        text-transform: uppercase;
-      }
-
-      .nav-links a:hover, a:focus {
-        background-color: #ff9776;
+        position: static;
+        width: auto;
+        background: none;
       }
 
-      .expanded {
-        display: unset;
+      .nav-links a {
+        display: inline-block;
+        padding: 15px 20px;
       }
 
-      @media screen and (min-width: 636px) {
-        .nav-links {
-          margin-left: 5em;
-          display: block;
-          position: static;
-          width: auto;
-          background: none;
-        }
-
-        .nav-links a {
-          display: inline-block;
-          padding: 15px 20px;
-        }
-
-        .hamburger {
-          display: none;
-        }
+      .menu {
+        display: none;
       }
+    }
     ```
 </Steps>
 
 ## Schreibe dein erstes Skript-Tag
 
-Dein Header ist noch nicht **interaktiv**, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Hamburger-Menü, um die Navigationslinks anzuzeigen oder zu verstecken.
+Dein Header ist noch nicht **interaktiv**, da er nicht auf Benutzereingaben reagieren kann, wie das Klicken auf das Menü, um die Navigationslinks anzuzeigen oder zu verstecken.
 
 Das Hinzufügen eines `<script>`-Tags ermöglicht es clientseitigem JavaScript, auf ein Benutzerereignis zu "hören" und entsprechend zu reagieren.
 
 <Steps>
 1. Füge das folgende `<script>`-Tag zu `index.astro`, kurz vor dem schließenden `</body>`-Tag hinzu.
 
-    ```astro title="src/pages/index.astro" ins={2-6}
+    ```astro title="src/pages/index.astro" ins={2-9}
       <Footer />
       <script>
-        document.querySelector('.hamburger').addEventListener('click', () => {
-          document.querySelector('.nav-links').classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+        
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
       </script>
     </body>
@@ -156,18 +152,24 @@ Anstatt dein JavaScript direkt auf jeder Seite zu schreiben, kannst du den Inhal
 1. Erstelle `src/scripts/menu.js` (du musst einen neuen `/scripts/`-Ordner erstellen) und verschiebe dein JavaScript dorthin.
 
     ```js title="src/scripts/menu.js"
-    document.querySelector('.hamburger').addEventListener('click', () => {
-      document.querySelector('.nav-links').classList.toggle('expanded');
+    const menu = document.querySelector('.menu');
+    
+    menu.addEventListener('click', () => {
+      const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+      menu.setAttribute('aria-expanded', !isExpanded);
     });
     ```
 
 2. Ersetze den Inhalt des `<script>`-Tags auf `index.astro` durch den folgenden Dateiimport:
 
-    ```astro title="src/pages/index.astro" ins={7} del={3-5}
+    ```astro title="src/pages/index.astro" ins={10} del={3-8}
       <Footer />
       <script>
-        document.querySelector('.hamburger').addEventListener('click', () => {
-          document.querySelector('.nav-links').classList.toggle('expanded');
+        const menu = document.querySelector('.menu');
+        
+        menu.addEventListener('click', () => {
+          const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+          menu.setAttribute('aria-expanded', !isExpanded);
         });
 
         import "../scripts/menu.js";
@@ -175,7 +177,7 @@ Anstatt dein JavaScript direkt auf jeder Seite zu schreiben, kannst du den Inhal
     </body>
     ```
 
-3. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Hamburger-Menü deine Navigationslinks weiterhin öffnet und schließt.
+3. Überprüfe deine Browser-Vorschau erneut bei kleineren Größen und bestätige, dass das Menü deine Navigationslinks weiterhin öffnet und schließt.
 
 4. Füge dasselbe `<script>` mit Import auf deinen anderen zwei Seiten, `about.astro` und `blog.astro`, hinzu und überprüfe, ob du eine responsive, interaktive Kopfzeile auf jeder Seite hast.
 
@@ -258,4 +260,4 @@ Diese Befehle werden alle beim Erstellen ausgeführt, um statisches HTML für de
 
 ### Ressourcen
 
-[Client-seitige Skripte in Astro](/de/guides/client-side-scripts/)
\ No newline at end of file
+[Client-seitige Skripte in Astro](/de/guides/client-side-scripts/)

From 4f98a8bd34e2a581f813ae2e8f70eb288feeda8f Mon Sep 17 00:00:00 2001
From: Felix Schneider <99918022+trueberryless@users.noreply.github.com>
Date: Tue, 7 Oct 2025 14:08:57 +0200
Subject: [PATCH 2/2] Update src/content/docs/de/tutorial/3-components/4.mdx

Co-authored-by: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
---
 src/content/docs/de/tutorial/3-components/4.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/de/tutorial/3-components/4.mdx b/src/content/docs/de/tutorial/3-components/4.mdx
index 109ec79bbe28e..b6265c7f89d90 100644
--- a/src/content/docs/de/tutorial/3-components/4.mdx
+++ b/src/content/docs/de/tutorial/3-components/4.mdx
@@ -59,7 +59,7 @@ Erstelle eine `<Menu />`-Komponente, um dein mobiles Menü zu öffnen und zu sch
     ```
     </details>
 
-4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Stile::
+4. Füge die folgenden Styles für deine Menü-Komponente hinzu, einschließlich einiger responsiver Styles:
 
     ```css title="src/styles/global.css" ins={2-9, 33-35, 51-53}
     /* Navigation-Styles */