From 1135ecfa48f7664f1f2d001d9047d2607e1a459b Mon Sep 17 00:00:00 2001
From: Thuan Bui <9248622+10h30@users.noreply.github.com>
Date: Fri, 2 Jan 2026 12:10:37 +0700
Subject: [PATCH] Add Menu component and implement toggle functionality in the
 header

---
 src/components/Header.astro |  2 ++
 src/components/Menu.astro   |  7 +++++++
 src/pages/blog.astro        |  3 +++
 src/pages/index.astro       |  3 +++
 src/scripts/menu.js         |  6 ++++++
 src/styles/global.css       | 16 ++++++++++++++++
 6 files changed, 37 insertions(+)
 create mode 100644 src/components/Menu.astro
 create mode 100644 src/scripts/menu.js

diff --git a/src/components/Header.astro b/src/components/Header.astro
index b01d93b..3087ab7 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,9 +1,11 @@
 ---
 import Navigation from "./Navigation.astro";
+import Menu from "./Menu.astro";
 ---
 
 <header>
   <nav>
+    <Menu />
     <Navigation />
   </nav>
 </header>
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
new file mode 100644
index 0000000..b459854
--- /dev/null
+++ b/src/components/Menu.astro
@@ -0,0 +1,7 @@
+---
+
+---
+
+<button aria-expanded='false' aria-controls='main-menu' class='menu'>
+  Menu
+</button>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index a3b1af8..ea56589 100644
--- a/src/pages/blog.astro
+++ b/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>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index dfe9869..396c40c 100644
--- a/src/pages/index.astro
+++ b/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>
diff --git a/src/scripts/menu.js b/src/scripts/menu.js
new file mode 100644
index 0000000..fc81d73
--- /dev/null
+++ b/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}`);
+});
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index e96663d..ee19924 100644
--- a/src/styles/global.css
+++ b/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 {