Add an interactive menu button component + integration

Author: mTixier

tutorial/src/components/Header.astro

@@ -1,9 +1,11 @@
 ---
-import Navigation from '../components/Navigation.astro';
+import Navigation from './Navigation.astro';
+import Menu from './Menu.astro';
 ---
 
 <header>
 	<nav>
+		<Menu />
 		<Navigation />
 	</nav>
 </header>

tutorial/src/components/Menu.astro

@@ -0,0 +1,5 @@
+---
+---
+<button aria-expanded="false" aria-controls="main-menu" class="menu">
+  Menu
+</button>

tutorial/src/pages/about.astro

@@ -69,5 +69,10 @@ const skillColor = "crimson";
 		  {skills.map((skill) => <li class="skill">{skill}</li>)}
 		</ul>
 		<Footer />
+		
+		<script>
+			import "../scripts/menu.js";
+		</script>
+		
 	</body>
 </html>

tutorial/src/pages/blog.astro

@@ -26,5 +26,10 @@ const pgTitle = "My Astro Learning Blog";
 		<a href="/myAstroTest/posts/post-3">Post 3</a>
 	  </ul>
 	  <Footer />
+	  
+		<script>
+			import "../scripts/menu.js";
+		</script>
+	  
 	</body>
 </html>

tutorial/src/pages/index.astro

@@ -28,5 +28,11 @@ const pgTitle = "My Astro Website Deployed with an Action";
 	  <Header />
 		<h1>{pgTitle}</h1>
 		<Footer />
+		
+		<script>
+			import "../scripts/menu.js";
+		</script>
+		
+		
 	</body>
 </html>

tutorial/src/scripts/menu.js

@@ -0,0 +1,6 @@
+const menu = document.querySelector('.menu');
+
+menu?.addEventListener('click', () => {
+  const isExpanded = menu.getAttribute('aria-expanded') === 'true';
+  menu.setAttribute('aria-expanded', `${!isExpanded}`);
+});

tutorial/src/styles/global.css

@@ -20,6 +20,17 @@ h1 {
   font-size: 2.5rem;
 }
 
+/* Menu */
+
+.menu {
+  background-color: #0d0950;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
+}
+
 /* nav styles */
 
 .nav-links {
@@ -44,6 +55,10 @@ h1 {
   background-color: #ff9776;
 }
 
+:has(.menu[aria-expanded="true"]) .nav-links {
+  display: unset;
+}
+
 @media screen and (min-width: 636px) {
   .nav-links {
     margin-left: 5em;
@@ -57,4 +72,9 @@ h1 {
 	display: inline-block;
 	padding: 15px 20px;
   }
+
+  .menu {
+    display: none;
+  }
+  
 }