Add Menu component and implement toggle functionality in the header

src/components/Header.astro

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

src/components/Menu.astro

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

src/pages/blog.astro

@@ -22,5 +22,8 @@ import "../styles/global.css";
       <li><a href='/posts/post-3/'>Post 3</a></li>
     </ul>
     <Footer />
+    <script>
+      import "../scripts/menu.js";
+    </script>
   </body>
 </html>

src/pages/index.astro

@@ -18,5 +18,8 @@ const pageTitle = "Thuan's Astro Page";
     <Header />
     <h1>{pageTitle}</h1>
     <Footer />
+    <script>
+      import "../scripts/menu.js";
+    </script>
   </body>
 </html>

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}`);
+});

src/styles/global.css

@@ -21,6 +21,14 @@ h1 {
 }
 
 /* nav styles */
+.menu {
+  background-color: #0d0950;
+  border: none;
+  color: #fff;
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 5px 10px;
+}
 
 .nav-links {
   width: 100%;
@@ -44,6 +52,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,6 +69,10 @@ h1 {
     display: inline-block;
     padding: 15px 20px;
   }
+
+  .menu {
+    display: none;
+  }
 }
 
 footer {